MODULO II, SUBMODULO IITECNICO EN PROGRAMACION
MI PAGINA WEB
CATALOGO DE SUPLEMENTOS
CBTIS75
Carrillo Palomares Cristian DanielPalafox Vargas Silvestre 30/10/25
ÍNDICE
CATALOGO DE PRODUCTOS
PORTADA
INFORMACION DEL PRODUCTO
INDICE
INTRODUCCION
CONCLUSIONES
CBTIS75
OBJETIVO
DISEÑO
INTERACTIVIDAD
INTRODUCCION
Este proyecto consiste en el diseño e implementación de una página web interactiva para mostrar diferentes suplementos deportivos. Se buscó una presentación clara, estética y funcional que permita al usuario explorar productos y conocer sus beneficios. Todo esto usando HTML, JAVA y CSS.
CBTIS75
OBJETIVO
OBJETIVO DE MI PAGINA
Mostrar catálogo inicial con 8 productos y opción de ver más.Proveer descripciones técnicas y orientadas al usuario sobre cada suplemento. Ofrecer navegación simple (Inicio / Nosotros / Contacto) y una página de detalle por producto. Presentar buen contraste y tema visual coherente para un público fitness. Estas son las funciones de mi pagina, el objetivo del proyecto es hacer una pagina de 0 con profesionalidad usando HTML, CSS y Java Script.
CBTIS75
MENU DE NAVEGACION
TARJETAS DE LS PRODUCTOS
ESTILO GENERAL
EXPLICACION
EXPLICACION
EXPLICACION
Se definió un esquema de colores negro y gris para darle una apariencia moderna y seria. También se agregó una transición para que los cambios de modo claro a oscuro se sientan suaves.
El menú se centró visualmente y se separó del banner para mejorar la legibilidad. El hover permite una respuesta visual que confirma interacción.
Los productos se presentan como tarjetas con bordes suaves y una sombra ligera. El efecto de “hover” aumenta ligeramente el tamaño para dar una sensación interactiva y visualmente agradable.
CBTIS75
MODO OSCURO
BUSCAR PRODUCTOS
MOSTRAR PRRODUCTOS
EXPLICACION
EXPLICACION
EXPLICACION
Esta función carga automáticamente los productos al entrar a la página, construyendo el HTML de cada tarjeta mediante JavaScript. Esto evita repetir código en el archivo HTML.
Con classList.toggle() se activa o desactiva el modo oscuro visual. También el texto del botón cambia automáticamente.
Permite encontrar un producto escribiendo en la barra de búsqueda. Se utiliza .filter() para comparar lo que el usuario escribe con los nombres de los productos.
CBTIS75
GENERACION AUTOMATICA
LISTA DE SUPLEMENTOS
ACTIVACION AUTOMATICA
EXPLICACION
EXPLICACION
EXPLICACION
Esta función crea dinámicamente las tarjetas de productos.No se escriben manualmente en HTML: el JavaScript construye la estructura. Esto hace el catálogo más eficiente, limpio y fácil de actualizar.
Aquí se define un arreglo de objetos, donde cada objeto representa un suplemento.Se guarda su nombre, precio, descripción e imagen. Esto permite manejar todos los productos de forma organizada y reutilizable.
Al cargar la página, el catálogo aparece automáticamente.El usuario no tiene que presionar ningún botón para verlo.
CBTIS75
BOTON DE VOVER
DETALLES DEL PRODUCTO
CAPTURA DESDE URL
EXPLICACION
EXPLICACION
EXPLICACION
Cuando el usuario hace clic en Ver más, se envían datos por la URL.Este código recupera esos datos y los coloca en la página de detalles.
Este enlace permite regresar al catálogo principal.Se modificó para quitar la flecha y dejar solo la palabra “Volver”, como pediste.
Los elementos tienen IDs para que JavaScript pueda insertar ahí la información del suplemento.Esto permite mostrar dinámicamente el nombre, descripción y precio.
CBTIS75
CBTIS75
Conclusion
Con esta actividad final del 2do parcial pude volver a trabajar con HTML, CSS y JavaScript para crear una página funcional con catálogo y detalles de productos. También investigué cada suplemento para explicar bien qué es y cómo ayuda en el gimnasio, haciendo la página más útil para el usuario. Hubo cosas que ajustar en el diseño y la interacción, pero con pruebas y cambios se logró el resultado esperado. En general, este trabajo me ayudó a mejorar mi forma de organizar y presentar contenido en una página web.
¡GRACIAS!
MI PAGINA WEB
CRISTIAN DANIEL CARRILLO PALOMARES
Created on October 30, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Corporate Christmas Presentation
View
Business Results Presentation
View
Meeting Plan Presentation
View
Customer Service Manual
View
Business vision deck
View
Economic Presentation
View
Tech Presentation Mobile
Explore all templates
Transcript
MODULO II, SUBMODULO IITECNICO EN PROGRAMACION
MI PAGINA WEB
CATALOGO DE SUPLEMENTOS
CBTIS75
Carrillo Palomares Cristian DanielPalafox Vargas Silvestre 30/10/25
ÍNDICE
CATALOGO DE PRODUCTOS
PORTADA
INFORMACION DEL PRODUCTO
INDICE
INTRODUCCION
CONCLUSIONES
CBTIS75
OBJETIVO
DISEÑO
INTERACTIVIDAD
INTRODUCCION
Este proyecto consiste en el diseño e implementación de una página web interactiva para mostrar diferentes suplementos deportivos. Se buscó una presentación clara, estética y funcional que permita al usuario explorar productos y conocer sus beneficios. Todo esto usando HTML, JAVA y CSS.
CBTIS75
OBJETIVO
OBJETIVO DE MI PAGINA
Mostrar catálogo inicial con 8 productos y opción de ver más.Proveer descripciones técnicas y orientadas al usuario sobre cada suplemento. Ofrecer navegación simple (Inicio / Nosotros / Contacto) y una página de detalle por producto. Presentar buen contraste y tema visual coherente para un público fitness. Estas son las funciones de mi pagina, el objetivo del proyecto es hacer una pagina de 0 con profesionalidad usando HTML, CSS y Java Script.
CBTIS75
MENU DE NAVEGACION
TARJETAS DE LS PRODUCTOS
ESTILO GENERAL
EXPLICACION
EXPLICACION
EXPLICACION
Se definió un esquema de colores negro y gris para darle una apariencia moderna y seria. También se agregó una transición para que los cambios de modo claro a oscuro se sientan suaves.
El menú se centró visualmente y se separó del banner para mejorar la legibilidad. El hover permite una respuesta visual que confirma interacción.
Los productos se presentan como tarjetas con bordes suaves y una sombra ligera. El efecto de “hover” aumenta ligeramente el tamaño para dar una sensación interactiva y visualmente agradable.
CBTIS75
MODO OSCURO
BUSCAR PRODUCTOS
MOSTRAR PRRODUCTOS
EXPLICACION
EXPLICACION
EXPLICACION
Esta función carga automáticamente los productos al entrar a la página, construyendo el HTML de cada tarjeta mediante JavaScript. Esto evita repetir código en el archivo HTML.
Con classList.toggle() se activa o desactiva el modo oscuro visual. También el texto del botón cambia automáticamente.
Permite encontrar un producto escribiendo en la barra de búsqueda. Se utiliza .filter() para comparar lo que el usuario escribe con los nombres de los productos.
CBTIS75
GENERACION AUTOMATICA
LISTA DE SUPLEMENTOS
ACTIVACION AUTOMATICA
EXPLICACION
EXPLICACION
EXPLICACION
Esta función crea dinámicamente las tarjetas de productos.No se escriben manualmente en HTML: el JavaScript construye la estructura. Esto hace el catálogo más eficiente, limpio y fácil de actualizar.
Aquí se define un arreglo de objetos, donde cada objeto representa un suplemento.Se guarda su nombre, precio, descripción e imagen. Esto permite manejar todos los productos de forma organizada y reutilizable.
Al cargar la página, el catálogo aparece automáticamente.El usuario no tiene que presionar ningún botón para verlo.
CBTIS75
BOTON DE VOVER
DETALLES DEL PRODUCTO
CAPTURA DESDE URL
EXPLICACION
EXPLICACION
EXPLICACION
Cuando el usuario hace clic en Ver más, se envían datos por la URL.Este código recupera esos datos y los coloca en la página de detalles.
Este enlace permite regresar al catálogo principal.Se modificó para quitar la flecha y dejar solo la palabra “Volver”, como pediste.
Los elementos tienen IDs para que JavaScript pueda insertar ahí la información del suplemento.Esto permite mostrar dinámicamente el nombre, descripción y precio.
CBTIS75
CBTIS75
Conclusion
Con esta actividad final del 2do parcial pude volver a trabajar con HTML, CSS y JavaScript para crear una página funcional con catálogo y detalles de productos. También investigué cada suplemento para explicar bien qué es y cómo ayuda en el gimnasio, haciendo la página más útil para el usuario. Hubo cosas que ajustar en el diseño y la interacción, pero con pruebas y cambios se logró el resultado esperado. En general, este trabajo me ayudó a mejorar mi forma de organizar y presentar contenido en una página web.
¡GRACIAS!