Dirección General de Educación Tecnológica industrial y de servicios
Centro de Bachillerato Tecnológico industrial y de servicio No. 75
“Miguel Hidalgo y Costilla”
Final - parcial 2
Nombre :Pamela Lilly Sandoval Sandoval Docente : Silvestre Plafox Vargas
5 - pm
Fecha de entrega :Jueves 30 de Octubre del 2025
Resumen.
El propósito fue diseñar y desarrollar una página web creativa y funcional sobre el arte de la Talavera, utilizando la estructura estándar del desarrollo web (index.html, styles.css, main.js). Lo que hice fue crear una experiencia visual que combine la estética tradicional de la Talavera con un diseño web moderno y responsivo. Realise un desarrolló a la estructura en HTML, se definieron estilos personalizados y animados en CSS (incluyendo un marco de título decorativo y la animación zoom en imágenes), y se implementó interactividad en JavaScript (scroll suave y efecto de confeti). En el resultado se obtuvo una web con una estética única, botones horizontales funcionales, animaciones en imágenes y un título principal altamente resaltado con marco y tipografía en gradiente. Y para finalizar se logró cumplir con todos los objetivos estéticos y funcionales, demostrando la aplicación de HTML, CSS y JS para el desarrollo de proyectos temáticos.
INTRODUCCIÓN.
La práctica se enfoco en los principios de diseño web semántico (HTML5) y la separación de capas de desarrollo (estructura, estilo e interactividad). El objetivo principal fue trasladar la paleta de colores del arte de la Talavera a un entorno digital. El experimento consistió en un proceso iterativo de desarrollo donde se implementó un boilerplate de archivos (HTML, CSS y JS). Se definieron variables de colores personalizadas para replicar el tono gris-beige de fondo (#BAB6A1) y el color de acento granate (#591B27). La práctica se llevó a cabo para aplicar habilidades de maquetación avanzada (CSS Grid y Flexbox) y manipulación del DOM (JavaScript) para crear una experiencia de usuario memorable, incluyendo el reto de diseñar un marco de título estático y un efecto de confeti.
DESARROLLO...
El proyecto se construyó con los tres lenguajes web esenciales. El HTML fue el esqueleto, definiendo la estructura y el contenido, como los títulos, las secciones y la ubicación de las imágenes. El CSS fue la capa de estilo y diseño, aplicando tus colores personalizados (fondo #BAB6A1, botones #591B27) y creando el marco artístico de triple color del título. También fue clave para la alineación horizontal de los botones de navegación y el efecto zoom en las imágenes. Finalmente, JavaScript proporcionó la interactividad, permitiendo el desplazamiento suave entre secciones y activando la animación de confeti al presionar el botón de contacto, haciendo la página dinámica.
oBJETIVO.
Desarrollar un sitio web funcional de temática libre mediante la implementación de etiquetas HTML semánticas, elementos interactivos con JavaScript y diseño CSS responsivo. El sitio deberá ser publicado en un servidor local, y la documentación de resultados junto con el análisis del proceso de implementación serán expuestos a través de la plataforma Genially.
mATERIALES Y EQUIPO.
- Conexión a Internet: Esencial para cargar las librerías externas utilizadas, específicamente:
Font Awesome (para los iconos de Instagram). canvas-confetti (para la animación de confeti).
- Archivos Base del Proyecto: Los tres archivos fundamentales de la práctica:
index.html (Estructura y Contenido). styles.css (Estilos y Diseño). main.js (Interactividad y Funcionalidades).
- Recursos Gráficos: Imágenes de alta resolución de piezas de Talavera (platos, floreros, azulejos), necesarias para el fondo del Hero y la Galería.
- Computadora: PC o Laptop con un sistema operativo (Windows) para el desarrollo y ejecución del código.
- Editor de Código: Software especializado como Visual Studio Code, Sublime Text o Atom, utilizado para escribir y modificar los archivos HTML, CSS y JavaScript.
- Navegador Web: Un navegador moderno (como Google Chrome, Firefox ) para visualizar, probar la interfaz y realizar la depuración del diseño.
PROCEDIMIENTOS Y RESULTADOS.
Estructura y Enlaces: Se creó el index.html definiendo las secciones principales (Hero, Galería, Contacto). Se enlazaron el CSS, el JS y las librerías externas de iconos (Font Awesome) y confeti (CDN).
PROCEDIMIENTOS Y RESULTADOS.
Estilización Base: Se definieron las variables de color solicitadas (fondo #BAB6A1, botones #591B27, se modifico iual el titulo de la paguina web se mezclaron dos colores para una nueva tonalidad y se usó Flexbox para colocar los enlaces de navegación de forma horizontal.
PROCEDIMIENTOS Y RESULTADOS.
Se creó un marco de tres capas (doble Blanco y Granate) en el título usando border y box-shadow para que sobresaliera.
PROCEDIMIENTOS Y RESULTADOS.
Se utilizó un gradiente de texto (linear-gradient) para dar un efecto "mixto" de color (Blanco y #14334F) al título principal.
PROCEDIMIENTOS Y RESULTADOS.
Scroll Suave: Se programó la función de scroll suave en los enlaces de la barra de navegación para una transición fluida entre secciones.
PROCEDIMIENTOS Y RESULTADOS.
Se definieron las variables de color solicitadas (Fondo: #BAB6A1, Botón: #591B27, etc.). Se aplicó el diseño Flexbox a la navegación para colocar los botones horizontalmente. Se diseñó el título h1 con un border y un triple box-shadow (Granate y Blanco) para crear el marco llamativo, y se utilizó la técnica de gradiente de texto para la mezcla de colores en las letras.
CONCLUCIÓN.
REFERENCIAS.
Se logró el objetivo de crear una página web de Talavera creativa, bonita y funcional, integrando de manera efectiva la estructura (HTML), la estética (CSS) y la interactividad (JavaScript). La práctica fue exitosa al demostrar cómo las reglas de CSS avanzadas (múltiples box-shadows, gradiente de texto) pueden utilizarse para crear diseños de alto impacto visual sin depender únicamente de librerías externas. La implementación del zoom y el confeti añade un valor interactivo que mejora la calidad final del producto. Como consecuencia, se aprendió a manejar el código de manera modular y a priorizar la experiencia de usuario con detalles animados y un diseño visualmente coherente.
- Ayala, M. (2021, 3 febrero). Reporte de práctica. Lifeder. https://www.lifeder.com/reporte-de-practica/
- Vallejo, N. (2019, 28 enero). Cómo redactar Objetivos de aprendizaje perfectos. OJÚLEARNING. https://ojulearning.es/2017/06/como-redactar-los-objetivos-de-aprendi zaje-perfectos/
- wikihow. (2014, 9 mayo). Cómo hacer un reporte de práctica. https://es.wikihow.com/hacer-un-reporte-de-pr%C3%A1ctica
- Google Fonts. (n.d.). Playfair Display & Roboto. Tipografías utilizadas. https://fonts.google.com/
GRACIAS
POR SU ATENCIÓNSE LOS AGRADESCO MUCHO...
SANDOVALSANDOVAL
PAMELA LILLY SANDOVAL SANDOVAL
Created on October 30, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Visual Presentation
View
Relaxing Presentation
View
Modern Presentation
View
Colorful Presentation
View
Modular Structure Presentation
View
Chromatic Presentation
View
City Presentation
Explore all templates
Transcript
Dirección General de Educación Tecnológica industrial y de servicios Centro de Bachillerato Tecnológico industrial y de servicio No. 75 “Miguel Hidalgo y Costilla”
Final - parcial 2
Nombre :Pamela Lilly Sandoval Sandoval Docente : Silvestre Plafox Vargas
5 - pm
Fecha de entrega :Jueves 30 de Octubre del 2025
Resumen.
El propósito fue diseñar y desarrollar una página web creativa y funcional sobre el arte de la Talavera, utilizando la estructura estándar del desarrollo web (index.html, styles.css, main.js). Lo que hice fue crear una experiencia visual que combine la estética tradicional de la Talavera con un diseño web moderno y responsivo. Realise un desarrolló a la estructura en HTML, se definieron estilos personalizados y animados en CSS (incluyendo un marco de título decorativo y la animación zoom en imágenes), y se implementó interactividad en JavaScript (scroll suave y efecto de confeti). En el resultado se obtuvo una web con una estética única, botones horizontales funcionales, animaciones en imágenes y un título principal altamente resaltado con marco y tipografía en gradiente. Y para finalizar se logró cumplir con todos los objetivos estéticos y funcionales, demostrando la aplicación de HTML, CSS y JS para el desarrollo de proyectos temáticos.
INTRODUCCIÓN.
La práctica se enfoco en los principios de diseño web semántico (HTML5) y la separación de capas de desarrollo (estructura, estilo e interactividad). El objetivo principal fue trasladar la paleta de colores del arte de la Talavera a un entorno digital. El experimento consistió en un proceso iterativo de desarrollo donde se implementó un boilerplate de archivos (HTML, CSS y JS). Se definieron variables de colores personalizadas para replicar el tono gris-beige de fondo (#BAB6A1) y el color de acento granate (#591B27). La práctica se llevó a cabo para aplicar habilidades de maquetación avanzada (CSS Grid y Flexbox) y manipulación del DOM (JavaScript) para crear una experiencia de usuario memorable, incluyendo el reto de diseñar un marco de título estático y un efecto de confeti.
DESARROLLO...
El proyecto se construyó con los tres lenguajes web esenciales. El HTML fue el esqueleto, definiendo la estructura y el contenido, como los títulos, las secciones y la ubicación de las imágenes. El CSS fue la capa de estilo y diseño, aplicando tus colores personalizados (fondo #BAB6A1, botones #591B27) y creando el marco artístico de triple color del título. También fue clave para la alineación horizontal de los botones de navegación y el efecto zoom en las imágenes. Finalmente, JavaScript proporcionó la interactividad, permitiendo el desplazamiento suave entre secciones y activando la animación de confeti al presionar el botón de contacto, haciendo la página dinámica.
oBJETIVO.
Desarrollar un sitio web funcional de temática libre mediante la implementación de etiquetas HTML semánticas, elementos interactivos con JavaScript y diseño CSS responsivo. El sitio deberá ser publicado en un servidor local, y la documentación de resultados junto con el análisis del proceso de implementación serán expuestos a través de la plataforma Genially.
mATERIALES Y EQUIPO.
- Conexión a Internet: Esencial para cargar las librerías externas utilizadas, específicamente:
Font Awesome (para los iconos de Instagram). canvas-confetti (para la animación de confeti).- Archivos Base del Proyecto: Los tres archivos fundamentales de la práctica:
index.html (Estructura y Contenido). styles.css (Estilos y Diseño). main.js (Interactividad y Funcionalidades).PROCEDIMIENTOS Y RESULTADOS.
Estructura y Enlaces: Se creó el index.html definiendo las secciones principales (Hero, Galería, Contacto). Se enlazaron el CSS, el JS y las librerías externas de iconos (Font Awesome) y confeti (CDN).
PROCEDIMIENTOS Y RESULTADOS.
Estilización Base: Se definieron las variables de color solicitadas (fondo #BAB6A1, botones #591B27, se modifico iual el titulo de la paguina web se mezclaron dos colores para una nueva tonalidad y se usó Flexbox para colocar los enlaces de navegación de forma horizontal.
PROCEDIMIENTOS Y RESULTADOS.
Se creó un marco de tres capas (doble Blanco y Granate) en el título usando border y box-shadow para que sobresaliera.
PROCEDIMIENTOS Y RESULTADOS.
Se utilizó un gradiente de texto (linear-gradient) para dar un efecto "mixto" de color (Blanco y #14334F) al título principal.
PROCEDIMIENTOS Y RESULTADOS.
Scroll Suave: Se programó la función de scroll suave en los enlaces de la barra de navegación para una transición fluida entre secciones.
PROCEDIMIENTOS Y RESULTADOS.
Se definieron las variables de color solicitadas (Fondo: #BAB6A1, Botón: #591B27, etc.). Se aplicó el diseño Flexbox a la navegación para colocar los botones horizontalmente. Se diseñó el título h1 con un border y un triple box-shadow (Granate y Blanco) para crear el marco llamativo, y se utilizó la técnica de gradiente de texto para la mezcla de colores en las letras.
CONCLUCIÓN.
REFERENCIAS.
Se logró el objetivo de crear una página web de Talavera creativa, bonita y funcional, integrando de manera efectiva la estructura (HTML), la estética (CSS) y la interactividad (JavaScript). La práctica fue exitosa al demostrar cómo las reglas de CSS avanzadas (múltiples box-shadows, gradiente de texto) pueden utilizarse para crear diseños de alto impacto visual sin depender únicamente de librerías externas. La implementación del zoom y el confeti añade un valor interactivo que mejora la calidad final del producto. Como consecuencia, se aprendió a manejar el código de manera modular y a priorizar la experiencia de usuario con detalles animados y un diseño visualmente coherente.
GRACIAS
POR SU ATENCIÓNSE LOS AGRADESCO MUCHO...