Centro de Bachillerato Tecnologico Industrial y de Servicios no.75
Presentación F nal
Paulina Ibarra Cardenas
Silvestre Palafox Vargas
Empezar
5 PM 30/10/25
Más información
Procedimiento y resultados
Lo que hay detras !!
Observa cómo funciona el código de mi página!!
Ver
Ver
1.Procedimiento y Resultados
El sitio tiene como objetivo preservar y celebrar su legado artístico, ofreciendo a los visitantes una experiencia multimedia. La página incluye una sección biográfica detallada, un apartado de música destacada con enlaces a sus éxitos y un reproductor de audio directo, y finalmente, una galería de momentos que permite visualizar su trayectoria.
¿De que trata mi página?
Esta página web es un homenaje digital integral a la vida y obra del legendario cantautor mexicano Joan Sebastian, conocido popularmente como "El Poeta del Pueblo".
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Este CSS establece la identidad visual del sitio con un tema oscuro y dorado y define la tipografía. Implementa la animación de revelación del título en la cabecera y una animación de entrada suave para las secciones al hacer scroll.Ademas agrega botones que te ayudan a navegar entre las secciones de la página.
La función onclick="togglePlay()" en el botón activa el JavaScript para reproducir o detener la canción cargada en el elemento <audio>, permitiéndote controlar la música de fondo mientras navegas.Ademas cuenta con un enlace directo a su pagina de Spotify.
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Este código HTML define la sección de Biografía, iniciando el contenido principal. Muestra el título <h2>Biografía</h2> y dos párrafos descriptivos sobre la vida y carrera de Joan Sebastian, utilizando la etiqueta semántica <section id="biografia"> para estructurar la información..
Este CSS utiliza Flexbox para centrar y estilizar los elementos de Música y Galería. Define botones con tema dorado/oscuro y añade efectos hover interactivos a enlaces de canciones y miniaturas de fotos.
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Este código HTML define la sección Música Destacada (`<section id="musica">`). Muestra el título y una lista con tres botones de enlace (`<a class="song-button">`) que dirigen al usuario a videos de YouTube de las canciones clave de Joan Sebastian.
Este código HTML define la sección de la Galería de Momentos (`gallery-container`) en tu sitio. Muestra tres miniaturas de imágenes (`gallery-item`), cada una con una imagen, una leyenda descriptiva y el atributo `onclick="mostrarModal(n)"`**. Este atributo es esencial, ya que al hacer clic en cualquier miniatura, llama a la función de JavaScript que abre la imagen correspondiente en tamaño completo dentro de una ventana modal
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Esta función de JavaScript, `spawnHorseEmojis()`, ejecuta una animación de bienvenida. Crea doce emojis de caballo en el centro de la pantalla y los dispersa rápidamente de forma aleatoria, desvaneciéndolos (`opacity: 0`) mediante transiciones programadas, para luego eliminarlos.
Este código llama a la función de JavaScript mostrarModal, la cual toma el número identificador y hace que la ventana modal oculta se vuelva visible (display: block), logrando así que la imagen seleccionada se muestre ampliada.
2. Procedimiento y resultados
Código, cómo funciona y como se ve
El código logra que la página se vea bien en diferentes dispositivos y ajusta la página al ancho de la pantalla del móvil, y las Media Queries en CSS. Estas últimas aplican estilos específicos (como cambiar el tamaño de la letra o reorganizar elementos).
La página web ha sido publicada en un servidor local para que pueda ser visualizada y accedida por cualquier usuario. Este paso fue fundamental, ya que al subir todos los archivos del proyecto.
Introducción
Este proyecto de práctica consistió en desarrollar un sitio web funcional y responsivo dedicado a Joan Sebastian, utilizando los pilares del desarrollo front-end: HTML, CSS y JavaScript. El objetivo principal es lograr un diseño visualmente impactante, creativo y profesional, asegurando una experiencia de usuario fluida y coherente en todos los dispositivos. Esto se alcanzará mediante la aplicación de las mejores prácticas de diseño, incluyendo un uso excelente de colores, tipografías y espaciados. Además, la presentación debe destacar por la incorporación de recursos multimedia, animaciones y transiciones de Genially, logrando una propuesta final que sea tanto atractiva como funcional.
Materiales y Recursos Utilizados
¿Que necesitamos para lograr esta practica?
Para crear la página se usaron HTML, CSS y JavaScript. El HTML se utilizó para estructurar la galería y colocar las imágenes con sus textos. El CSS sirvió para dar estilo, como colores, tamaños y organización visual. El JavaScript se usó para la parte interactiva, como mostrar el contenido al hacer clic en cada imagen.
Muchas graciaspor tu atención :)
Volver al inicio
Presentación F nal
PAULINA IBARRA CARDENAS
Created on October 30, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Modern Presentation
View
Terrazzo Presentation
View
Colorful Presentation
View
Modular Structure Presentation
View
Chromatic Presentation
View
City Presentation
View
News Presentation
Explore all templates
Transcript
Centro de Bachillerato Tecnologico Industrial y de Servicios no.75
Presentación F nal
Paulina Ibarra Cardenas
Silvestre Palafox Vargas
Empezar
5 PM 30/10/25
Más información
Procedimiento y resultados
Lo que hay detras !!
Observa cómo funciona el código de mi página!!
Ver
Ver
1.Procedimiento y Resultados
El sitio tiene como objetivo preservar y celebrar su legado artístico, ofreciendo a los visitantes una experiencia multimedia. La página incluye una sección biográfica detallada, un apartado de música destacada con enlaces a sus éxitos y un reproductor de audio directo, y finalmente, una galería de momentos que permite visualizar su trayectoria.
¿De que trata mi página?
Esta página web es un homenaje digital integral a la vida y obra del legendario cantautor mexicano Joan Sebastian, conocido popularmente como "El Poeta del Pueblo".
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Este CSS establece la identidad visual del sitio con un tema oscuro y dorado y define la tipografía. Implementa la animación de revelación del título en la cabecera y una animación de entrada suave para las secciones al hacer scroll.Ademas agrega botones que te ayudan a navegar entre las secciones de la página.
La función onclick="togglePlay()" en el botón activa el JavaScript para reproducir o detener la canción cargada en el elemento <audio>, permitiéndote controlar la música de fondo mientras navegas.Ademas cuenta con un enlace directo a su pagina de Spotify.
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Este código HTML define la sección de Biografía, iniciando el contenido principal. Muestra el título <h2>Biografía</h2> y dos párrafos descriptivos sobre la vida y carrera de Joan Sebastian, utilizando la etiqueta semántica <section id="biografia"> para estructurar la información..
Este CSS utiliza Flexbox para centrar y estilizar los elementos de Música y Galería. Define botones con tema dorado/oscuro y añade efectos hover interactivos a enlaces de canciones y miniaturas de fotos.
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Este código HTML define la sección Música Destacada (`<section id="musica">`). Muestra el título y una lista con tres botones de enlace (`<a class="song-button">`) que dirigen al usuario a videos de YouTube de las canciones clave de Joan Sebastian.
Este código HTML define la sección de la Galería de Momentos (`gallery-container`) en tu sitio. Muestra tres miniaturas de imágenes (`gallery-item`), cada una con una imagen, una leyenda descriptiva y el atributo `onclick="mostrarModal(n)"`**. Este atributo es esencial, ya que al hacer clic en cualquier miniatura, llama a la función de JavaScript que abre la imagen correspondiente en tamaño completo dentro de una ventana modal
2. Procedimiento y resultados
Código, cómo funciona y como se ve
Esta función de JavaScript, `spawnHorseEmojis()`, ejecuta una animación de bienvenida. Crea doce emojis de caballo en el centro de la pantalla y los dispersa rápidamente de forma aleatoria, desvaneciéndolos (`opacity: 0`) mediante transiciones programadas, para luego eliminarlos.
Este código llama a la función de JavaScript mostrarModal, la cual toma el número identificador y hace que la ventana modal oculta se vuelva visible (display: block), logrando así que la imagen seleccionada se muestre ampliada.
2. Procedimiento y resultados
Código, cómo funciona y como se ve
El código logra que la página se vea bien en diferentes dispositivos y ajusta la página al ancho de la pantalla del móvil, y las Media Queries en CSS. Estas últimas aplican estilos específicos (como cambiar el tamaño de la letra o reorganizar elementos).
La página web ha sido publicada en un servidor local para que pueda ser visualizada y accedida por cualquier usuario. Este paso fue fundamental, ya que al subir todos los archivos del proyecto.
Introducción
Este proyecto de práctica consistió en desarrollar un sitio web funcional y responsivo dedicado a Joan Sebastian, utilizando los pilares del desarrollo front-end: HTML, CSS y JavaScript. El objetivo principal es lograr un diseño visualmente impactante, creativo y profesional, asegurando una experiencia de usuario fluida y coherente en todos los dispositivos. Esto se alcanzará mediante la aplicación de las mejores prácticas de diseño, incluyendo un uso excelente de colores, tipografías y espaciados. Además, la presentación debe destacar por la incorporación de recursos multimedia, animaciones y transiciones de Genially, logrando una propuesta final que sea tanto atractiva como funcional.
Materiales y Recursos Utilizados
¿Que necesitamos para lograr esta practica?
Para crear la página se usaron HTML, CSS y JavaScript. El HTML se utilizó para estructurar la galería y colocar las imágenes con sus textos. El CSS sirvió para dar estilo, como colores, tamaños y organización visual. El JavaScript se usó para la parte interactiva, como mostrar el contenido al hacer clic en cada imagen.
Muchas graciaspor tu atención :)
Volver al inicio