Autor: Chiribao Maria Fecha de creación 24/05/25 Fecha de entrega 11/07/25 Proyecto: Time Machine Tecnología: HTML, CSS, JS, soporte IA para efectos.
Propósito del Proyecto El objetivo principal de este proyecto fue aplicar las estructuras básicas de HTML, CSS y JavaScript. A lo largo del desarrollo, pude observar las particularidades sintácticas y estructurales de cada lenguaje. Si bien cada uno permite construir soluciones simples o complejas de manera independiente, su verdadero potencial se evidencia al integrarlos, conformando una arquitectura en capas que da vida y dinamismo al proyecto. Descripción General del Sitio Web El sitio web desarrollado está orientado a un modelo de e-commerce con una propuesta interactiva para el usuario, integrando elementos didácticos y educativos. Su narrativa se centra en la evolución tecnológica, permitiendo al usuario experimentar un recorrido por distintos artefactos históricos que, en muchos casos, las nuevas generaciones desconocen. Esta propuesta pone en valor el acelerado avance tecnológico en un formato atractivo y accesible. Módulo de Historia y Productos Cada semana se presenta una historia distinta. En esta entrega en particular, el enfoque está puesto en la evolución de las cámaras fotográficas a lo largo del tiempo. El usuario puede simular un viaje temporal que lo conduce hacia la sección de productos. El buscador implementado permite filtrar resultados por año, palabras clave o marca, y en caso de no encontrar coincidencias, informa al usuario de manera clara. Los productos pueden ser añadidos al carrito de compras, el cual genera un mensaje de confirmación ante cada acción. No existe límite de productos por usuario. Dentro del carrito, se implementó un sistema que contabiliza tanto unidades individuales como el total general, permitiendo aumentar o disminuir cantidades. Cada ítem se presenta con imagen, nombre y precio, y puede eliminarse individualmente. Además, es posible continuar navegando sin perder el contenido del carrito. Una vez confirmada la compra, el sistema redirige al usuario al formulario de registro y selección de medio de pago. La transacción simula una compra real, mostrando un visor tipo ticket con los datos de la operación. Al finalizar, el carrito se vacía automáticamente y el usuario es redirigido nuevamente a la sección de productos. Formulario de Contacto y Reseñas La sección de contacto incluye un formulario funcional a través de Formspree, el cual permite consultas, coordinaciones y envío de reseñas. El sistema identifica el tipo de mensaje recibido y, en caso de tratarse de una reseña, la inserta automáticamente en el carrusel de comentarios visibles al público. Reflexión y Uso de Herramientas Complementarias La experiencia en cuanto a creatividad versus resultados obtenidos fue satisfactoria. Si bien hubiese deseado lograr una simulación de viaje temporal más inmersiva, las limitaciones del uso exclusivo de herramientas gratuitas de diseño lo impidieron parcialmente. Durante el desarrollo, recurrí intensamente al uso de inteligencia artificial, particularmente a ChatGPT, para resolver diversos desafíos técnicos. Entre ellos, destacan efectos visuales en 3D, manejo de eventos, enlaces e hipervínculos, y la implementación de funciones robustas en JavaScript. Todo esto fue adaptado con el objetivo de mantener un código organizado, eficiente y escalable. En resumen, este proyecto no solo representó una práctica técnica en HTML, CSS y JavaScript, sino también un ejercicio de integración creativa y uso responsable de tecnologías emergentes como la inteligencia artificial.