5.2 KiB
5.2 KiB
Diseño Periodístico Clásico - El Observador
🎨 Transformación Visual Completa
La aplicación ha sido completamente rediseñada con un estilo periodístico clásico inspirado en los mejores periódicos del mundo:
- The New York Times (estructura y jerarquía)
- El País (elementos visuales españoles)
- The Guardian (claridad tipográfica)
✨ Características Implementadas
1. Tipografía Periodística
- Titulares: Old Standard TT & Playfair Display (serif clásico)
- Cuerpo: Merriweather (serif legible para lectura larga)
- UI/Navegación: Lato (sans-serif limpio y moderno)
2. Paleta de Colores Clásica
- Tinta Negra (#1a1a1a): Texto principal con peso y autoridad
- Papel Blanco (#ffffff): Fondo limpio y profesional
- Papel Crema (#f9f7f4): Fondo general con calidez
- Rojo Acento (#c1121f): Color institucional para destacados
- Azul Enlaces (#326891): Enlaces legibles y tradicionales
3. Elementos de Diseño Periodístico
- ✅ Cabecera con nombre en mayúsculas y bordes dobles
- ✅ Fecha y hora actualizadas en tiempo real (Estilo Madrid)
- ✅ Navegación sticky negra con bordes rojos
- ✅ Tarjetas de noticias con bordes sutiles
- ✅ Tipografía jerárquica (títulos grandes, meta pequeña)
- ✅ Hover effects suaves y profesionales
- ✅ Badges de categoría en rojo institucional
- ✅ Layout responsive adaptado a móviles
4. Página de Artículos
- 📰 Breadcrumbs para navegación
- 📰 Título prominente con tipografía serif
- 📰 Metadata periodística (fuente, fecha, país, categoría)
- 📰 Resumen destacado con borde rojo
- 📰 Sidebar con artículos relacionados
- 📰 Modo lectura inmersivo
- 📰 Botones de compartir, PDF y favoritos
5. Funcionalidades
- Modo Lectura: Aumenta fuente y elimina distracciones
- Modo Oscuro: Tema completamente adaptado
- Responsive: Diseño adaptado para móvil, tablet y desktop
- Animaciones: Transiciones suaves y profesionales
- Accesibilidad: Contraste adecuado y jerarquía clara
📱 Responsive Design
- Desktop (>968px): Layout completo con sidebar
- Tablet (768px-968px): Grid adaptado en 2 columnas
- Mobile (<768px): Una columna, menú de hamburguesa
🌓 Modo Oscuro
Paleta invertida manteniendo la estética:
- Fondo oscuro (#0f0f0f)
- Texto claro (#e0e0e0)
- Acento rojo más brillante (#ff4444)
- Bordes sutiles (#333)
🎯 Mejoras de UX
- Historial de Lectura: Artículos leídos aparecen con opacidad reducida
- Favoritos Persistentes: Sistema de guardado con estrellas
- Búsqueda Avanzada: Filtros por categoría, país, fecha
- Búsqueda Semántica IA: Toggle para búsqueda inteligente
- Notificaciones: Sistema de alertas para nuevas noticias
- Paginación Clara: Navegación entre páginas de noticias
📂 Archivos Modificados
static/style.css- CSS completamente reescrito (1300+ líneas)templates/base.html- Actualizado con nuevas fuentes y nombretemplates/noticia_classic.html- Template de detalle mejoradotemplates/_noticias_list.html- Cards de noticias (sin cambios necesarios)
🚀 Activación
Los cambios están activos automáticamente después de reiniciar nginx:
docker compose restart nginx
🎨 Paleta de Colores Completa
--ink-black: #1a1a1a /* Texto principal */
--newspaper-gray: #333333 /* Texto secundario */
--paper-white: #ffffff /* Fondo de tarjetas */
--paper-cream: #f9f7f4 /* Fondo general */
--border-gray: #d1d1d1 /* Bordes */
--accent-red: #c1121f /* Acento principal */
--accent-red-dark: #9a0e1a /* Acento hover */
--link-blue: #326891 /* Enlaces */
--text-gray: #4a4a4a /* Meta información */
--light-gray: #f0f0f0 /* Fondos sutiles */
💡 Inspiración de Diseño
El diseño sigue los principios de los mejores periódicos:
- Jerarquía Clara: Los títulos dominan visualmente
- Espacios en Blanco: El contenido respira
- Legibilidad: Fuentes serif para lectura larga
- Profesionalismo: Colores sobrios y clásicos
- Credibilidad: Diseño serio y confiable
🔄 Migración desde Diseño Anterior
El diseño anterior era moderno con:
- Glassmorphism
- Gradientes animados
- Colores vibrantes (púrpura, rosa, azul)
- Fuentes sans-serif (Poppins, Roboto)
El nuevo diseño es periodístico con:
- Fondos sólidos
- Colores clásicos (blanco, negro, rojo)
- Tipografía serif tradicional
- Bordes definidos
✅ Testing Recomendado
- ✓ Verificar que el header muestra "EL OBSERVADOR"
- ✓ Comprobar que las fuentes serif se carguen correctamente
- ✓ Probar el modo oscuro (botón luna/sol)
- ✓ Verificar responsive en móvil
- ✓ Probar funcionalidades (favoritos, búsqueda, filtros)
- ✓ Verificar que las imágenes de noticias se vean bien
- ✓ Comprobar paginación
- ✓ Probar modo lectura en artículos
👨💻 Créditos
Diseño creado siguiendo las mejores prácticas de diseño periodístico digital, manteniendo toda la funcionalidad existente del agregador de noticias RSS.
Fecha de Actualización: Enero 2026
Versión: 2.0 - Diseño Periodístico Clásico