CENTRO DE BACHILLERATO TECNOLOGICO INDUSTRIAL Y DE SERVICIOS NO.75
CONSTRUYE PAGINAS WEB
Final
ESPECIALIDAD: PROGRAMACION MATUTINA “5PM”
ALUMNA: GALLEGOS GUERRERO VALERIA JOCELYN
DOCENTE: SILVESTRE PALAFOX VARGAS
INTRODUCCION
El objetivo de este proyecto fue crear un sitio web funcional, atractivo y bien estructurado, aplicando los conocimientos aprendidos en clase.Elegí Miraculous Ladybug porque me encanta su diseño, su energía positiva y la dualidad entre Marinette y Ladybug. Mi intención fue que cada sección de la página tuviera sentido, que el diseño combinara con la temática y que además fuera interactivo y dinámico.
Estructura HTML
En la parte de HTML trabajé con una estructura clara y bien organizada. Usé etiquetas semánticas como <header>, <nav>, <main>, <section>, <article> y <footer> para mantener el código limpio y profesional. Cada parte tiene su función: el encabezado con la navegación, el cuerpo principal con los personajes y episodio, y al final un formulario de contacto. Quise que el sitio fuera fácil de leer tanto para el usuario como para quien revise el código.
Diseño con CSS
Para los estilos visuales, elegí una paleta de colores basada en rojos, negros, blancos y tonos rosados, siguiendo la estética de Ladybug. Apliqué sombras, bordes redondeados y efectos hover en los botones, buscando que la página se sintiera viva y coherente con el tema. El fondo tiene una textura suave que hace contraste con los elementos principales, y el sitio se adapta bien a pantallas grandes y pequeñas..
Interactividad con JavaScript
En JavaScript añadí varias funciones para hacer la página más dinámica.Primero, un botón que muestra un mensaje sorpresa cuando lo presionas, algo divertido para el usuario. También programé una validación del formulario de contacto para asegurar que se llenen todos los campos antes de enviarlo. Además, incluí un efecto visual que hace que el encabezado cambie de opacidad al hacer scroll, lo que da una sensación más fluida al navegar. Y finalmente, agregué un apartado de “Datos random de Miraculous”, donde al presionar un botón aparece un dato curioso, como por ejemplo: “Gabriel Agreste es en realidad Hawk Moth” o “El único que conoce la identidad de Ladybug y Cat Noir es Luka”. Este detalle hace la experiencia más entretenida y muestra la manipulación del DOM de una forma creativa.
Resultados y Desafíos
Durante el proceso tuve algunos retos, especialmente al alinear las tarjetas de los personajes y al hacer que el formulario se validara sin recargar la página.Para resolverlo, utilicé propiedades de flexbox y display inline-block, además de la función preventDefault() en JavaScript. Cada pequeño obstáculo me ayudó a entender mejor cómo funcionan los elementos entre sí y cómo depurar el código.
Funcionamiento en Servidor Local
El sitio fue ejecutado y probado en un servidor local, y todo funcionó correctamente. Las funciones interactivas se ejecutan bien y el diseño se mantiene estable en distintos dispositivos. Probé la visualización en computadora, asegurándome de que el sitio se vea bien y sea fácil de usar.
Conclusiones
Con este proyecto aprendí mucho sobre cómo organizar un sitio web desde cero.Entendí la importancia de las etiquetas semánticas, de los estilos coherentes con el tema y de usar JavaScript para hacerlo más interactivo. Me gustó mucho combinar creatividad con programación, y siento que este trabajo refleja tanto mis conocimientos técnicos como mi gusto por el diseño. Si lo sigo mejorando, me gustaría agregar una galería de imágenes, música de fondo o incluso animaciones de los personajes.
¡Gracias!
Final
VALERIA JOCELYN GALLEGOS GUERRERO
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
CONSTRUYE PAGINAS WEB
Final
ESPECIALIDAD: PROGRAMACION MATUTINA “5PM”
ALUMNA: GALLEGOS GUERRERO VALERIA JOCELYN
DOCENTE: SILVESTRE PALAFOX VARGAS
INTRODUCCION
El objetivo de este proyecto fue crear un sitio web funcional, atractivo y bien estructurado, aplicando los conocimientos aprendidos en clase.Elegí Miraculous Ladybug porque me encanta su diseño, su energía positiva y la dualidad entre Marinette y Ladybug. Mi intención fue que cada sección de la página tuviera sentido, que el diseño combinara con la temática y que además fuera interactivo y dinámico.
Estructura HTML
En la parte de HTML trabajé con una estructura clara y bien organizada. Usé etiquetas semánticas como <header>, <nav>, <main>, <section>, <article> y <footer> para mantener el código limpio y profesional. Cada parte tiene su función: el encabezado con la navegación, el cuerpo principal con los personajes y episodio, y al final un formulario de contacto. Quise que el sitio fuera fácil de leer tanto para el usuario como para quien revise el código.
Diseño con CSS
Para los estilos visuales, elegí una paleta de colores basada en rojos, negros, blancos y tonos rosados, siguiendo la estética de Ladybug. Apliqué sombras, bordes redondeados y efectos hover en los botones, buscando que la página se sintiera viva y coherente con el tema. El fondo tiene una textura suave que hace contraste con los elementos principales, y el sitio se adapta bien a pantallas grandes y pequeñas..
Interactividad con JavaScript
En JavaScript añadí varias funciones para hacer la página más dinámica.Primero, un botón que muestra un mensaje sorpresa cuando lo presionas, algo divertido para el usuario. También programé una validación del formulario de contacto para asegurar que se llenen todos los campos antes de enviarlo. Además, incluí un efecto visual que hace que el encabezado cambie de opacidad al hacer scroll, lo que da una sensación más fluida al navegar. Y finalmente, agregué un apartado de “Datos random de Miraculous”, donde al presionar un botón aparece un dato curioso, como por ejemplo: “Gabriel Agreste es en realidad Hawk Moth” o “El único que conoce la identidad de Ladybug y Cat Noir es Luka”. Este detalle hace la experiencia más entretenida y muestra la manipulación del DOM de una forma creativa.
Resultados y Desafíos
Durante el proceso tuve algunos retos, especialmente al alinear las tarjetas de los personajes y al hacer que el formulario se validara sin recargar la página.Para resolverlo, utilicé propiedades de flexbox y display inline-block, además de la función preventDefault() en JavaScript. Cada pequeño obstáculo me ayudó a entender mejor cómo funcionan los elementos entre sí y cómo depurar el código.
Funcionamiento en Servidor Local
El sitio fue ejecutado y probado en un servidor local, y todo funcionó correctamente. Las funciones interactivas se ejecutan bien y el diseño se mantiene estable en distintos dispositivos. Probé la visualización en computadora, asegurándome de que el sitio se vea bien y sea fácil de usar.
Conclusiones
Con este proyecto aprendí mucho sobre cómo organizar un sitio web desde cero.Entendí la importancia de las etiquetas semánticas, de los estilos coherentes con el tema y de usar JavaScript para hacerlo más interactivo. Me gustó mucho combinar creatividad con programación, y siento que este trabajo refleja tanto mis conocimientos técnicos como mi gusto por el diseño. Si lo sigo mejorando, me gustaría agregar una galería de imágenes, música de fondo o incluso animaciones de los personajes.
¡Gracias!