Bitácora del Proyecto

Resumen del Proyecto

Este proyecto consiste en el desarrollo de un sitio web responsivo para presentar a nuestro equipo de trabajo, utilizando tecnologías modernas como Bootstrap, CSS personalizado y JavaScript interactivo.

Duración

2 semanas

Integrantes

5 desarrolladores

Tecnologías

HTML, CSS, JS, Bootstrap

Timeline de Desarrollo

Fase 1: Planificación y Diseño

Días 1-3

Decisiones de Diseño:

Paleta de colores: Decidimos usar una paleta moderna personalizada en cada pagina para transmitir innovación y autenticidad.
Tipografía: Seleccionamos diferentes fuentes de Google Fonts para mejorar la legibilidad y estética.
Layout: Optamos por un diseño de tarjetas (cards) para organizar la información de manera clara y atractiva.
Navegación: Implementamos una barra de navegación fija con dropdown para facilitar el acceso a todas las secciones.

Estructura del Proyecto:

Organización de archivos en carpetas separadas (css/, js/, img/)
Definición de la arquitectura de páginas (index, perfiles individuales, bitácora)
Planificación de componentes reutilizables

Fase 2: Desarrollo Frontend

Días 4-10

Implementaciones Realizadas:

Integración de Bootstrap: Integración completa de Bootstrap 5 para el sistema de grid y componentes.
CSS Personalizado: Desarrollo de estilos custom con variables CSS para mantener consistencia.
Diseño Responsivo: Implementación de breakpoints para la adaptacion del diseño a diferentes tamaños de pantalla.
Componentes Interactivos: Creación de tarjetas animadas, botones con efectos hover y transiciones suaves.

Dificultades Encontradas:

Compatibilidad de Breakpoints: Inicialmente tuvimos problemas con el diseño en dispositivos móviles pequeños. Lo resolvimos ajustando los márgenes y paddings específicamente para el breakpoint mas pequeño (400px).

Fase 3: JavaScript e Interactividad

Días 11-12

Funcionalidades Implementadas:

Animaciones CSS: Efectos de fade-in, hover y transiciones suaves en todos los elementos.
Interacciones Específicas: Cada página individual tiene funciones únicas.
Scroll Suave: Navegación fluida entre secciones de la página.
Contadores Animados: Estadísticas que se animan al hacer scroll.

Desafíos Superados:

Animaciones: Optimizamos las animaciones para un buen funcionamiento en todos los dispositivos.

Fase 4: Testing y Optimización

Días 13-14

Pruebas Realizadas:

Testeo Responsivo: Verificación en múltiples dispositivos y tamaños de pantalla.
Compatibilidad de Navegadores: Pruebas en Chrome, Firefox, Safari y Edge.
Testeo de Performance: Optimización de carga de recursos y tiempo de respuesta.

Cambios Importantes:

Adaptación: Comenzamos con un desarrollo base y luego fuimos ajustando el diseño para tener un estilo más armonioso.

Tecnologías y Herramientas

Frontend

HTML5 semántico
CSS3 con variables y flexbox
Bootstrap 5.3.0
JavaScript ES6+
Google Fonts

Herramientas

Bootstrap Icons
CSS Grid y Flexbox
Media queries responsivas

Lecciones Aprendidas

Aspectos Positivos

La planificación inicial detallada nos ahorró mucho tiempo durante el desarrollo.
El uso de Bootstrap aceleró significativamente el proceso de maquetación.
Las variables CSS facilitaron el mantenimiento y la consistencia del diseño.
La colaboración en equipo mejoró la calidad del código final.

Áreas de Mejora

Necesitamos mejorar nuestras pruebas de accesibilidad desde el inicio.
La optimización de performance debería ser considerada desde las primeras fases.
Documentar mejor el código durante el desarrollo.
Implementar un sistema de versionado más robusto para futuros proyectos.