PresentaciónFinal

Centro de Bachillerato Tecnologico Industrial y de Servicios no.75

PresentaciónFinal

Jose Manuel Gonzalez Aguillón

Silvestre Palafox Vargas

30/10/25

Start

Introducción

El propósito central de este proyecto es desarrollar un sitio web funcional de temática libre mediante la aplicación estricta de: etiquetas HTML semánticas, elementos interactivos con JavaScript y diseño CSS responsivo. El sitio web será publicado en un servidor local. La documentación de resultados y el análisis del proceso de implementación serán presentados de manera concisa a través de la plataforma Genially.

Código y resultados

Código y resultados

Código y resultados

Código y resultados

Pagina Final

Learn more

Utilizando las tres tecnologías: HTML definió la estructura del contenido. CSS gestionó el diseño y la estética visual. JavaScriptaportó la interactividad y funcionalidad dinámica para que la página cobrara vida.

Este proyecto ha logrado el desarrollo funcional de un sitio web integrando de manera exitosa: HTML semántico, diseño CSS responsivo y JavaScript interactivo. La implementación incluye un catálogo dinámico y un flujo de compra completo con validación. La finalización del proyecto, con la publicación en servidor local y la documentación detallada en Genially, valida la capacidad técnica en el desarrollo frontend y la gestión integral del ciclo de vida del proyecto.

Gracias por su Atención!

Explicación

Este código JavaScript maneja la búsqueda de productos en el catálogo sneakersData al presionar la tecla 'Enter' en el campo de texto con ID buscar. Al activarse, previene el envío, toma el texto de búsqueda, y busca una coincidencia en los nombres de las zapatillas. Si encuentra el producto, llama a la función mostrarCompra. Si no encuentra resultados, hace visible el elemento popup.

Explicación

Este código JavaScript está diseñado para gestionar el envío de un formulario de contacto en una página web. Primero, verifica que el elemento con el ID formulario exista. Si existe, adjunta un escuchador de eventos que se activa al intentar enviar el formulario (submit). La función principal es prevenir el envío tradicional del formulario (e.preventDefault()) para manejarlo con JavaScript. Luego, recupera los valores ingresados en los campos de nombre, correo electrónico y mensaje. Finalmente, valida que los tres campos estén llenos; si lo están, muestra una alerta de agradecimiento al usuario y limpia el formulario (form.reset()). Si falta algún campo, muestra una alerta pidiendo que se llenen todos los campos.

Explicación

vLa función mostrarCompra(sneaker) se encarga de mostrar los detalles de un producto específico. Toma un objeto sneaker, actualiza el contenedor detalle-compra con la imagen, nombre y precio de ese producto, y luego hace visible la sección de compra llamando a mostrarSeccion('compra'). Además, añade un escuchador de eventos al botón "Comprar ahora" que, al ser pulsado, llama a mostrarFormularioPago() para avanzar al formulario de pago con la información del producto

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Lorem ipsum dolor sit

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.
• Labore et dolore magna aliqua.

Explicación

Este código gestiona la acción de un botón de contacto (btnContacto) dentro de un popup. Al hacer clic, el código oculta la ventana emergente (popup) y luego utiliza la función mostrarSeccion para redirigir al usuario a la sección de contacto de la página.

Adémas

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.

Explicación

Este código JavaScript se encarga de generar dinámicamente el catálogo de productos en el sitio web. En cada iteración, crea un nuevo elemento div que actúa como la "tarjeta" (card) de un producto individual, le añade la clase sneaker, y llena su contenido HTML con la imagen, el nombre, el precio y un botón de "Ver detalles", utilizando las propiedades del objeto actual (snk.img, snk.nombre, etc.). Finalmente, agrega esta tarjeta al contenedor galeria, logrando que todo el catálogo se muestre automáticamente en la página.

Explicación

Este código JavaScript define una variable llamada sneakersData que es un arreglo (lista) de objetos, y sirve como la base de datos o catálogo de productos para un sitio web de zapatillas. Cada objeto dentro del arreglo representa un sneaker individual y contiene tres propiedades clave: el nombre del modelo (una cadena de texto), el precio (un valor numérico) y la img (la ruta de la imagen) asociada a ese producto. El propósito principal de este arreglo es almacenar de forma estructurada toda la información necesaria para renderizar o mostrar el catálogo completo de productos dinámicamente en la página web.

Explicación

La función mostrarFormularioPago(sneaker)` reemplaza el contenido de la sección de compra con un formulario HTML detallado para recolectar los datos de pago y envío del producto seleccionado. Luego, añade un manejador al evento `submit` del formulario: al confirmar la compra, este código previene el envío, muestra una alerta de agradecimiento personalizada con el nombre del sneaker, y redirecciona al usuario a la sección de inicio.