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 Tablet🖥️ Interfaz 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).