Épisode · Wiki Storia
T1 - E5 | La Nube de los Sitios Mágicos
¿Cómo crear un sitio web vivo con código?
En camino hacia el conocimiento con la música para niños de 3 a 6 años!
Hoy, vamos a descubrir cómo crear un sitio web vivo con código.
Imágenes de nuestros pequeños aventureros en acción - ¿vienes a jugar con ellos?
🎼 ¿Listo(a) para moverte, cantar y soñar?
¡Esta primera melodía te llevará a descubrir el mundo a través de la música!
🎤 ¡Muévete, canta, descubre!
¡Vamos a la aventura con esta segunda melodía. 😀
🎙 Lee la letra de nuestra música:
La letra de las dos canciones es idéntica, solo difieren las melodías.
La aventura comienza con una historia y descubrimientos para niños de 6 a 8 años!
📻 Escucha este artículo en modo podcast
Para una experiencia inmersiva, disfruta de nuestro artículo en modo podcast. Haz clic en el reproductor de abajo para comenzar a escuchar y déjate llevar por nuestro artículo.
📝 Resumen rápido de la información clave
¿Cómo crear un sitio web vivo con código?
Una página web es como una gran hoja de papel mágica donde se pueden escribir historias, mostrar imágenes y hasta jugar a juegos. Para crear una página web viva, se utilizan tres amigos muy especiales: HTML, CSS y JavaScript.
HTML es como el esqueleto del sitio web, organiza todo lo que vemos. Ayuda a estructurar las diferentes partes de un sitio web, como el título, los párrafos y las imágenes. Gracias a él, todo está bien ordenado y es fácil de encontrar.
CSS es el estilista que hace que el sitio sea bonito y colorido. Permite cambiar los colores, los tamaños y las posiciones de los elementos en una página web. Con CSS, podemos transformar un sitio simple en una obra de arte visual.
Por fin, JavaScript es el mago que hace mover y reaccionar los elementos del sitio. Añade animaciones e interacciones, como botones que cambian de color cuando los tocas. Con JavaScript, un sitio web se vuelve vivo e interactivo.

La Nube de los Sitios Mágicos
¿Cómo crear un sitio web vivo con código?
El Descubrimiento de la Nube de los Sitios Mágicos
Después de superar los desafíos del Laberinto (1) Digital, donde Kenji y Aïcha, junto a sus amigos, siguieron los consejos de un gato siamés astuto para burlar los muros cambiantes, descubren un mundo aún más mágico. Gracias a los algoritmos (2), aprendieron a manipular (3) los códigos para encontrar la salida. Su aventura los llevó hasta una nube flotante donde cada página web brilla como una estrella. Aïcha, con sus trenzas y sus gafas redondas, está especialmente emocionada. ¡Le encanta crear páginas que brillan, se mueven y hablan! Kenji, por su parte, siempre está listo para la acción, su gorra verde y su camiseta pixelada (4) lo demuestran. Juntos, se preparan para explorar este nuevo territorio encantado.
Aïcha, maravillada, exclama:
« ¡Mira, Kenji! ¡Cada página es una estrella! »
Kenji, maravillado, exclama:
« ¡Increíble! ¡Podemos crear nuestro propio sitio mágico! »
Aïcha, con los ojos brillantes de emoción, dice:
« ¡Sí, empecemos! Voy a mezclar los colores y las formas. »
Poco después, Aïcha combina los colores, las formas y las líneas de código (5). Ella crea una página que cuenta todas sus aventuras. Kenji observa, fascinado. Ya se imagina juegos interactivos donde los usuarios pueden controlar dragones o resolver enigmas (6). Juntos, trabajan duro, sus dedos bailan sobre los teclados mágicos. Su sitio web cobra vida poco a poco.
Kenji, emocionado, propone entonces:
« Aïcha, ¡podemos añadir dragones y acertijos! »
Aïcha, entusiasmada, exclama:
« ¡Qué buena idea! Vamos a hacer nuestro sitio aún más vivo. »
Al combinar colores, formas y líneas de código, crean una página que cuenta todas sus aventuras… ¡y que reacciona al tacto!
La Creación de un Sitio Web Interactivo
Después de añadir botones que cambian de color, imágenes que se mueven y textos que parpadean, Aïcha y Kenji están encantados. Su sitio web se vuelve cada vez más vivo. Siguen explorando las infinitas posibilidades del código.
Kenji, lleno de entusiasmo, propone entonces:
« ¡Aïcha, añadamos sonidos cuando se haga clic en los botones! »
Aïcha, entusiasmada, exclama:
« ¡Excelente idea! Vamos a hacer nuestro sitio aún más divertido. »
Kenji, con los ojos brillantes de emoción, propone:
« Podemos añadir también juegos interactivos. »
Aïcha, con los ojos brillantes de emoción, añade:
« ¡Sí, y con historias que se mueven! »
Poco después, descubren que algunas partes de su sitio no funcionan bien. Kenji propone usar algoritmos para solucionar el problema. Escriben líneas de código para revisar cada elemento de su sitio.
Una vez terminado su sitio web, Aïcha y Kenji, acompañados de su fiel mascota, un gatito blanco llamado Pixel, se encuentran de repente transportados a un mercado encantado. Allí, descubrirán los bloques mágicos necesarios para construir sus programas. Cada puesto brilla con módulos (7) de colores, pantallas pequeñas y cables luminosos, listos para ser ensamblados y crear maravillas digitales. Con sus nuevas herramientas y su imaginación sin límites, están listos para enfrentar nuevas aventuras y explorar aún más misterios en el mundo de los algoritmos mágicos. ¿Quién sabe qué sorpresas les esperan en el Mercado de los Módulos?
📺 Mira este artículo en formato video
Para una experiencia aún más inmersiva, mira nuestro video: