Bitácora de Desarrollo
Hito 1 - 14/04 - Inicialización y Estructura Base
El proceso comenzó con la configuración del entorno de trabajo y la creación del repositorio en GitHub. En este primer commit, se definió la arquitectura del proyecto siguiendo las buenas prácticas de organización de archivos. Se establecieron las carpetas independientes para estilos, lógica de programación e imágenes, asegurando que los archivos HTML críticos permanezcan en la raíz para facilitar el despliegue en Vercel.
Se incluyó el archivo README.md como documento maestro de información técnica. Este archivo no solo describe el propósito del equipo, sino que también sirve como guía para la paleta de colores, las fuentes de Google Fonts que se utilizarán una vez definidas y el registro de funciones de JavaScript que se implementarán en las fases siguientes.
Hito 2 - 15/04 - Implementación inicial con Bootstrap
En una primera instancia, se decidió utilizar Bootstrap con el fin de establecer una nomenclatura común para todas las integrantes del grupo. Esta elección permitió obtener rápidamente una interfaz funcional y adaptable a distintos tamaños de pantalla sin necesidad de definir estilos desde cero. Sin embargo, durante el proceso de implementación se identificaron limitaciones en cuanto a la personalización visual, ya que el diseño tendía a verse genérico y poco alineado con una identidad propia del equipo.
Esta instancia sirvió como base de exploración y permitió tomar las decisiones posteriores respecto a la identidad visual y el enfoque de diseño.
Hito 3 - 16/04 - Definición de Identidad Visual y Estilo Cómic
A nivel visual, se optó por una estética tipo cómic como identidad del proyecto. Esta decisión surgió a partir del nombre del equipo, "Grupo BAM", que evoca la onomatopeya de los cómics. Se utilizó la herramienta Nano Banana de Gemini para generar un logo acorde a esta temática. Se probaron varias paletas de colores hasta encontrar la que más nos gustó. Esta elección sirvió como punto de partida para definir la paleta de colores y el estilo gráfico del sitio. La elección de una estética cómic permitió crear una identidad visual distintiva y coherente con el nombre del equipo, aportando un toque divertido y dinámico a la interfaz.
Se establecieron los breakpoints en la página index para garantizar que el diseño se adaptara correctamente a diferentes tamaños de pantalla.
Hito 4 - 20/04 - Creación de páginas personales
Comenzamos con el desarrollo de las páginas personales de cada integrante del equipo, siguiendo los requerimientos solicitados en la consigna, pero prestando especial atención a respetar de forma estricta la identidad visual y estética de cómic de la página principal.
Para lograr un aspecto cohesivo, se generaron las imágenes de avatar utilizando Inteligencia Artificial con el siguiente prompt: "Una sola viñeta de cómic clásico, estilo Pop Art, primer plano de personaje adjunto, puntos Ben-Day, colores primarios, fondo de acción explosivo, estilo ilustración de novela gráfica antigua, línea artística definida."
Además, se establecieron los breakpoints correspondientes para garantizar que el diseño se adaptara correctamente a diferentes tamaños de pantalla.
Hito 5 - 27/04 - Diseño de bitácora como timeline
Se diseñó la bitácora de desarrollo utilizando un formato de timeline para presentar los hitos clave del proyecto. Cada hito se representó como un elemento en la línea de tiempo, con un título, una descripción detallada y un botón para mostrar u ocultar la información adicional. Este formato permitió organizar la información de manera clara y visualmente atractiva, facilitando la navegación y comprensión del proceso de desarrollo.
Para la generación de este estilo se utilizó como herramienta GitHub Copilot, que permitió crear rápidamente la estructura HTML y los estilos CSS necesarios para el diseño del timeline. Se implementó funcionalidad en JavaScript para permitir la interacción con los botones de cada hito, mostrando u ocultando las descripciones según sea necesario. Este enfoque permitió presentar la información de manera dinámica.
Hito 6 - 28/04 - Animación de carga inicial
Se implementó una animación de inicio ("Splash Screen") en la portada del proyecto
(index.html) utilizando la Web Animations API nativa de JavaScript.
La animación, inspirada en la estética "Tudum" de Netflix, despliega un fondo temporal con un efecto "pop-in" centrado del logo. Tras una breve pausa, el logo se achica y desaparece suavemente en el medio de la pantalla mientras se desvanece el fondo oscuro, revelando el contenido de la página. Esta funcionalidad interactiva cumple con el requisito obligatorio de integración de JavaScript en la portada.