Bitácora
Esta sección conteniene una descripción del proceso de desarrollo del proyecto, incluyendo: decisiones de diseño tomadas por el equipo, dificultades encontradas y cómo se resolvieron y cambios importantes realizados durante la implementación.
La bitácora está pensada para registrar el proceso de trabajo y debe ampliarse en el TP2, y TP3, incorporando reflexiones sobre la evolución del proyecto.
- 05/09/25: Se definió el esquema de colores y tipografía.
- 07/09/25: Implementadas animaciones en la portada.
- 12/09/25: Ajustes de responsive.
- 18/09/25: Creación de páginas individuales de cada integrante.
- 25/09/25: Mejoras y correcciones generales.
Decisiones de Diseño
El equipo decidió utilizar una paleta de colores basada en tonos azules y grises para transmitir profesionalismo y modernidad. Además, se seleccionó la tipografía 'Roboto' por su legibilidad y estilo contemporáneo. Se optó por un diseño responsive para garantizar una experiencia óptima en dispositivos móviles y tablets.
Dificultades Encontradas
Durante el desarrollo, enfrentamos problemas con la implementación de animaciones en la portada, lo que requirió investigar y aplicar técnicas de CSS avanzadas. También hubo desafíos al ajustar el diseño para pantallas pequeñas, especialmente en la navegación, que se resolvieron utilizando media queries y pruebas en diferentes dispositivos.
Cambios Importantes
Inicialmente, se planeó un diseño estático, luego se incorporo interactividad mediante JavaScript para mejorar la experiencia del usuario. Además, se reorganizó la estructura de carpetas del proyecto para facilitar el mantenimiento y la colaboración entre los integrantes del equipo.
Análisis Completo del Sistema
Archivos HTML
El sistema incluye varias páginas HTML que representan diferentes secciones del sitio web:
- index.html: Página principal con información sobre el equipo y un diseño responsivo.
- crc.html: Perfil de Carina con detalles personales y un diseño personalizado.
- eduardo.html: Perfil de Eduardo con detalles personales y un diseño personalizado.
- neuyin.html: Perfil de Neuyin con detalles personales y un diseño personalizado.
- bitacora.html: Sección dedicada a registrar el proceso de desarrollo del proyecto.
Archivos CSS
El diseño visual se gestiona mediante varios archivos CSS:
- _reset_edu.css: Archivo de reinicio para garantizar consistencia entre navegadores.
- style_eduardo.css: Estilos específicos para la página de Eduardo, incluyendo variables de colores y tipografías personalizadas.
- style_neuyin.css: Estilos para la página de Neuyin, concordantes con todo el sitio web pero con animaciones que personalizan su perfil.
- style.css: Estilos generales del sitio, incluyendo soporte para modo oscuro y diseño responsivo y estilos de la página de Carina.
Archivos JavaScript
La interactividad del sitio se implementa con varios scripts:
- main.js: Gestiona el modo oscuro, menús desplegables y popups interactivos.
- scripts_eduardo.js: Añade efectos de paralaje y animaciones específicas para la página de Eduardo.
- scripts_carina.js: Contiene funcionalidades específicas para la página de Carina, como el carrusel de imágenes.
- scripts_neuyin.js: Se añaden funcionalidades que le brindan dinamismo al perfil.