refactor: reorganizar estructura de archivos en raiz

Antes la raiz tenia 20+ archivos sueltos. Ahora organizado en:

  docs/       10 archivos .md de documentacion tecnica
  scripts/    3 scripts utilitarios (credentials, migrate, verify)
  config/     entity_config.json (aliases y blacklist NER)
  data/       feeds.csv (feeds precargados)

Eliminados restos de Docker que ya no aplican:
  .dockerignore, .env.example, .env.secure.example, nginx.conf (raiz)

Makefile: eliminados targets docker-build, añadidos install/rebuild/check/poc

Referencias actualizadas en:
  deploy/debian/install.sh  entity_config.json -> config/entity_config.json
  deploy/debian/build.sh    entity_config.json -> config/entity_config.json
  README.md                 links a docs/ y data/ actualizados,
                            arbol de estructura del repo reescrito

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO 2026-03-30 22:29:50 +02:00
parent ec839b5b54
commit b3bf3d7a7f
23 changed files with 59 additions and 335 deletions

View file

@ -0,0 +1,145 @@
# 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
1. **Historial de Lectura**: Artículos leídos aparecen con opacidad reducida
2. **Favoritos Persistentes**: Sistema de guardado con estrellas
3. **Búsqueda Avanzada**: Filtros por categoría, país, fecha
4. **Búsqueda Semántica IA**: Toggle para búsqueda inteligente
5. **Notificaciones**: Sistema de alertas para nuevas noticias
6. **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 nombre
- `templates/noticia_classic.html` - Template de detalle mejorado
- `templates/_noticias_list.html` - Cards de noticias (sin cambios necesarios)
## 🚀 Activación
Los cambios están **activos automáticamente** después de reiniciar nginx:
```bash
docker compose restart nginx
```
## 🎨 Paleta de Colores Completa
```css
--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:
1. **Jerarquía Clara**: Los títulos dominan visualmente
2. **Espacios en Blanco**: El contenido respira
3. **Legibilidad**: Fuentes serif para lectura larga
4. **Profesionalismo**: Colores sobrios y clásicos
5. **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
1. ✓ Verificar que el header muestra "EL OBSERVADOR"
2. ✓ Comprobar que las fuentes serif se carguen correctamente
3. ✓ Probar el modo oscuro (botón luna/sol)
4. ✓ Verificar responsive en móvil
5. ✓ Probar funcionalidades (favoritos, búsqueda, filtros)
6. ✓ Verificar que las imágenes de noticias se vean bien
7. ✓ Comprobar paginación
8. ✓ 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