📑 Memoria Técnica del Proyecto PrintNova

Documento justificativo del desarrollo web, diseño interactivo y decisiones técnicas.

👥 1. Equipo y Distribución de Tareas

El proyecto ha sido realizado por un equipo multidisciplinar, optimizando las capacidades individuales para un resultado profesional:

Svitlana Vyshemyrska: Responsable de la identidad visual, diseño gráfico de recursos (GIMP), maquetación estética mediante CSS3, diseño de la experiencia de usuario (UX) y redacción de contenidos académicos.
Vadym Vyshemyrskyi: Responsable de la arquitectura del código HTML5, implementación de la lógica interactiva en JavaScript (calculadora), optimización técnica de multimedia y gestión de la estructura del sitio.

Se ha mantenido una coherencia total con el manual de diseño previo, evolucionando hacia un entorno web funcional:

Paleta de Colores: Uso de Gris Oscuro (#2C3E50) para transmitir seriedad institucional, Verde Menta (#4BA891) para representar la sostenibilidad y Fucsia (#E74C7D) como color de acento para captar la atención en los botones (CTA).
Tipografía: Se ha implementado Poppins para titulares (modernidad y peso visual) e Inter para el cuerpo de texto (máxima legibilidad en dispositivos digitales).
Unidades REM: Se ha optado por unidades relativas (rem) para garantizar que el diseño sea accesible y se adapte a las preferencias de visualización del usuario.

Uso de etiquetas HTML5 (header, nav, section, footer) para una estructura limpia que favorece la indexación y el mantenimiento del código.

Implementación de Flexbox para la navegación y CSS Grid para la organización de servicios y precios, asegurando un diseño estable.

Se ha desarrollado un Fixed Header (menú fijo) que permanece visible durante el scroll, mejorando significativamente la usabilidad.

Para cumplir con los requisitos de "dinamismo y publicidad", se ha creado un sistema de entrada visual suave:

Lógica: Se define una animación denominada slideUpFade en CSS utilizando la regla @keyframes.
Efecto: Los elementos aparecen desde una posición desplazada 40px hacia abajo con opacidad 0, moviéndose hacia su posición final con opacidad 1.
Aplicación: Esta animación se aplica a los bloques principales de cada página mediante la clase .animate-up.

El núcleo de la interacción es la Calculadora de Presupuestos Editorial, diseñada para captar la atención del cliente potencial:

Flujo: El script se activa solo al pulsar el botón específico con el ID btn-abrir-calc, evitando conflictos con otras llamadas a la acción del sitio.
Validación: Implementa una lógica de control que verifica si el usuario ha ingresado números válidos. Si el dato es erróneo, se informa mediante un alert preventivo.
Algoritmo: Calcula un precio estimado basado en gastos de gestión editorial más un coste variable por página, multiplicado por la tirada deseada.

Todos los archivos multimedia han sido tratados para ofrecer la mejor calidad con el menor peso posible:

Formatos: Uso de PNG-24 para mantener transparencias en el logotipo y JPG optimizado para fondos complejos.
Resolución: Imágenes exportadas a 72-96 dpi, ideales para visualización en pantallas estándar, manteniendo una carga rápida en el servidor.
Vídeo: Integración de reproductores externos mediante contenedores CSS que mantienen la proporción de aspecto (aspect-ratio).

Durante la implementación web, se realizaron ajustes estratégicos respecto a la Práctica 1 para mejorar el producto final:

Unificación de Navegación: En el diseño inicial, el menú era variable. En la versión final se unificó y se fijó para evitar la pérdida de contexto del usuario.
Identificación Visual: Se añadieron iconos temáticos (Emojis) en los títulos para servir como anclajes visuales, una técnica de UX que no estaba presente en el storyboard original.
Precisión de Servicios: Se amplió la descripción de la "Estrategia de Valor" para incluir conceptos reales como indexación Scopus y DOI, aportando mayor credibilidad al negocio.