La Tablet‑Lector es un lector digital completo, estable y persistente, que reproduce la experiencia de un Kindle directamente en el navegador. Permite cargar libros en texto plano, leerlos con comodidad y personalizar la experiencia visual, manteniendo siempre el estado del usuario incluso tras cerrar o actualizar la página.
Descripción detallada del funcionamiento de la Tablet‑Lector
La Tablet‑Lector es una aplicación web diseñada para reproducir la experiencia de lectura de un dispositivo Kindle, pero completamente desarrollada en HTML, CSS y JavaScript. Su objetivo es permitir la lectura cómoda de libros en texto plano, con controles avanzados de visualización, personalización y persistencia de datos.
Abrir TabletInterfaz general
La interfaz está compuesta por tres áreas principales:
1. Pantalla de lectura
Es el área central donde se muestra el contenido del libro. Incluye:
- Un contenedor interno (
bookContent) donde se renderiza el texto. - Una capa superpuesta (
brightnessLayer) que controla el brillo sin alterar el contenido. - Estilos dinámicos que cambian según el modo de lectura (día, sepia o noche).
La pantalla está diseñada para imitar la textura visual de un lector electrónico, con tipografía clara, márgenes amplios y un comportamiento fluido al desplazarse.
2. Barra de controles
Situada justo debajo de la pantalla, contiene todos los botones y ajustes necesarios para la lectura:
- ◀ / ▶ — Navegación entre páginas.
- Día / Sepia / Noche — Cambia el modo de lectura.
- Brillo — Ajusta la intensidad de la capa de brillo.
- A+ / A− — Control de zoom (tamaño de letra).
- Limpiar libro — Elimina el libro cargado y borra su estado guardado.
Todos los controles responden de forma inmediata y actualizan la visualización en tiempo real.
3. Área de carga de libro
Permite introducir el contenido del libro en texto plano.
- El usuario pega el texto en el cuadro.
- Al pulsar Cargar, el sistema divide el libro en páginas y lo guarda automáticamente.
Sistema de carga y paginación
Cuando el usuario carga un libro:
- El texto se divide en fragmentos de tamaño fijo (aprox. 1200 caracteres por página).
- Cada fragmento se almacena en un array
pages[]. - Se muestra la primera página en pantalla.
- El libro completo se guarda en
localStorage.
La paginación es instantánea y no requiere recargar el documento.
Persistencia de datos (localStorage)
El lector guarda automáticamente:
- El libro completo (
kindle_book_pages) - La página actual (
kindle_current_page) - El tamaño de letra (
kindle_font_size) - El modo de lectura (
kindle_mode) - El nivel de brillo (
kindle_brightness)
Esto significa que:
- Si cierras la pestaña, el libro sigue ahí.
- Si apagas el ordenador, sigue ahí.
- Si actualizas el navegador, sigue ahí.
El lector se restaura exactamente en el punto donde lo dejaste.
🌗 Modos de lectura
La Tablet‑Lector incluye tres modos visuales:
Modo Día
- Fondo blanco puro
- Texto negro
- Ideal para máxima claridad
Modo Sepia
- Fondo crema
- Texto marrón oscuro
- Reduce la fatiga visual
Modo Noche
- Fondo negro
- Texto gris claro
- Perfecto para leer en la oscuridad
El modo se aplica mediante clases CSS, lo que garantiza estabilidad y rendimiento.
🔆 Control de brillo real
El brillo no modifica el color del texto ni del fondo. En su lugar:
- Una capa blanca semitransparente (
brightnessLayer) se superpone al contenido. - El deslizador ajusta su opacidad.
- Esto imita el comportamiento de un Kindle real.
El brillo también se guarda en localStorage.
🔍 Zoom dinámico
El tamaño de letra puede aumentarse o reducirse con los botones:
- A+ → aumenta la fuente
- A− → la reduce
El tamaño se aplica directamente al contenedor de la pantalla y se guarda para futuras sesiones.
🧹 Botón “Limpiar libro”
Este botón:
- Elimina el libro cargado.
- Borra los datos guardados en
localStorage. - Restablece la pantalla con un mensaje de inicio.
No afecta a los modos, brillo o zoom.
Arquitectura estable
El lector está diseñado para evitar errores comunes:
- El contenido del libro se actualiza solo dentro de
bookContent, nunca se reemplaza la pantalla completa. - La capa de brillo permanece fija y no se destruye.
- El DOM no se sobrescribe, evitando pérdidas de contenido.
- Compatible con navegadores modernos (Chrome, Edge, Firefox, Safari).