Volver al Menú Principal

Manual de Usuario Redimtools

Guía completa de la suite: qué hace cada herramienta, sus parámetros, recomendaciones y notas de privacidad. Pulsa cualquier sección para desplegarla.

🆕 Funciones nuevas
  • Foto Carnet / documento: pulsa «Foto Carnet», elige el tamaño (Pasaporte/Cédula 35×45 mm, Visa 51×51 mm, Carnet 30×40…) y el color de fondo (blanco/azul/gris). La app quita el fondo, detecta tu rostro y recorta al tamaño exacto. Pulsa «Generar» y luego «Descargar».
  • Peso objetivo: escribe un tamaño máximo en KB (p. ej. 200) y pulsa «Descargar a este peso». La imagen se comprime sola hasta ese peso; no tienes que ir probando calidades.
  • Presets de redes sociales: botones que rellenan el tamaño exacto para Instagram, YouTube, Facebook, LinkedIn y X. Pulsas uno y solo te queda darle a «Redimensionar».
  • Comparar antes / después: tras aplicar un cambio, pulsa «Comparar antes / después» para ver la imagen original y el resultado con un divisor deslizable, mostrando además las dimensiones de cada una.
  • ↶ Deshacer / Rehacer: vuelve atrás o adelante en tus ediciones paso a paso, con los botones o los atajos Ctrl+Z y Ctrl+Y. Deshacer hasta el principio deja lista la imagen cargada para empezar de nuevo, sin tener que volver a seleccionarla.

El Redimensionador Avanzado Redimtools es un sistema de procesamiento de imágenes de última generación que combina algoritmos matemáticos de interpolación, inteligencia artificial para segmentación semántica, y transformaciones geométricas avanzadas. A diferencia de herramientas básicas de redimensionamiento, nuestro motor implementa un pipeline completo de procesamiento que preserva la calidad fotométrica y estructural de la imagen.

ARQUITECTURA DEL SISTEMA:
El redimensionador opera en 5 capas secuenciales:
  1. Capa de Preprocesamiento: Análisis EXIF, normalización de color, detección de perfil ICC
  2. Capa de Interpolación: Aplicación del algoritmo Lanczos con kernel sinc optimizado
  3. Capa de Post-procesamiento: Filtros de nitidez, corrección de artefactos, optimización de bordes
  4. Capa de Transformación: Operaciones geométricas (rotación, perspectiva, recorte)
  5. Capa de Exportación: Codificación final con compresión adaptativa

1. Motor de Redimensionamiento - Algoritmo Lanczos (Matemática Detallada)

El núcleo del sistema utiliza el algoritmo de interpolación Lanczos, que es superior a métodos convencionales debido a su función de reconstrucción basada en la función sinc ventaneada:

Fórmula Matemática del Kernel Lanczos:

L(x) = ⎧ sinc(x) × sinc(x/a) si |x| < a
⎩ 0 en otro caso

Donde:

  • sinc(x) = sin(πx)/(πx) - Función cardinal seno
  • a - Parámetro de ventana (típicamente a=3 para Lanczos-3)
  • x - Distancia desde el píxel de salida al píxel de entrada

Comparativa de Algoritmos de Interpolación:

Algoritmo Ventana Complejidad Artefactos Uso Recomendado
Vecino Más Cercano 1×1 O(1) Alta (escalonado) Pixel art, íconos
Bilineal 2×2 O(n²) Media (borroso) Rápido, general
Bicúbico 4×4 O(n²) Baja Fotografías estándar
Lanczos-3 (Redimtools) 6×6 O(n² log n) Mínima Fotografía profesional, ampliaciones
⚡ OPTIMIZACIÓN DE RENDIMIENTO:
Implementamos Lanczos con las siguientes optimizaciones:
  • Precomputación de kernels: Los kernels se calculan una vez y se cachean
  • Procesamiento por tiles: Divide la imagen en bloques de 256×256 para mejor uso de cache CPU
  • SIMD paralelización: Usa instrucciones AVX2/SSE para procesar múltiples píxeles simultáneamente
  • Pipeline asíncrono: Mientras una parte se procesa, otra se carga/guarda

2. Sistema de Unidades y Conversión Física

El redimensionador soporta dos sistemas de medida con conversión automática:

2.1 Sistema de Píxeles (Unidad Digital)

  • Definición: Unidad mínima de información en una imagen raster
  • Característica: Absoluta, independiente del dispositivo de salida
  • Uso: Web, pantallas, interfaces digitales

2.2 Sistema de Centímetros (Unidad Física)

  • Definición: Unidad del Sistema Internacional para impresión
  • Conversión a píxeles: Requiere conocer el DPI del dispositivo de salida
  • Fórmula de conversión bidireccional:
PX → CM: cm = (px / DPI) × 2.54
CM → PX: px = (cm / 2.54) × DPI
Área Total: Área_px = ancho_px × alto_px | Área_cm = ancho_cm × alto_cm

2.3 Tabla de DPI Estándar por Dispositivo:

Dispositivo/Propósito DPI Recomendado Razón Técnica
Web / Pantallas LCD 72 - 96 DPI Resolución estándar de navegadores (96 DPI = 1:1 con puntos CSS)
Impresión Doméstica 150 - 200 DPI Balance entre calidad y tamaño de archivo
Impresión Profesional 300 DPI Estándar de imprenta offset (punto de difracción límite del ojo humano a 30cm)
Fotografía Fine Art 600 DPI Máximo detalle para observación cercana
Gigantografías / Vallas 50 - 100 DPI Observación a distancia (3+ metros)
ADVERTENCIA SOBRE CAMBIO DE DPI:
Cambiar el valor de DPI NO altera los píxeles de la imagen existente. Solo afecta:
  • Relación CM/PX: Cambia la equivalencia entre unidades físicas y digitales
  • Metadatos EXIF: Modifica la etiqueta "Resolution" en el archivo de salida
  • Tamaño de impresión: Determina cuántos centímetros ocupará la imagen al imprimir
Para cambiar realmente la resolución, debes redimensionar la imagen (alterar el número de píxeles).

3. Módulo de Eliminación de Fondo - Arquitectura de IA

Implementamos una arquitectura híbrida de redes neuronales para segmentación semántica:

3.1 Pipeline de Procesamiento de Fondo:

  1. Preprocesamiento:
    • Normalización de color (sRGB → linear RGB)
    • Reducción de ruido con filtro bilateral
    • Detección de rango dinámico (HDR/SDR)
  2. Segmentación:
    • Forward pass en U²-Net (Unified Attention Network)
    • Generación de mapa de probabilidad alpha (0-1)
    • Fusión multi-escala (4 niveles de pirámide)
  3. Post-procesamiento:
    • Umbralización adaptativa (alpha threshold)
    • Suavizado de bordes con filtro Gaussiano adaptativo
    • Corrección de halo (color decontamination)

3.2 Modelos de IA Disponibles:

Modelo Arquitectura Parámetros Precisión (mIoU) VRAM TPS
U²-Net (Ultimate) Encoder-Decoder con RSU 44.05M 92.3% 1.2GB 0.8
DeepLabV3+ Atrous Convolution 59.33M 89.7% 1.8GB 1.2
MODNet Multi-objective 6.45M 87.9% 0.5GB 3.5
Ensemble (3 modelos) Votación por promedio 109.83M 94.1% 3.5GB 0.3

3.3 Parámetros Avanzados de Segmentación:

Parámetro Rango Efecto Valor Óptimo
Alpha Threshold 0-255 Define transparencia mínima para considerar "fondo" 10-20 (bajos para pelo)
Feather Radius 0-20px Suavizado de transición sujeto/fondo 1-3px
Contrast Boost 0-200% Aumenta contraste en bordes difusos 120%
Decontaminate Strength 0-100% Elimina color "sangrado" del fondo 75%
CASOS DE FALLA CONOCIDOS - LIMITACIONES FÍSICAS:
La IA fallará o producirá resultados subóptimos en:
  • Bajo contraste cromático: Sujeto y fondo con color similar (±5% en espacio Lab)
  • Transparencias reales: Vidrio, humo, agua (requiere matting físico)
  • Sombras proyectadas: La IA no distingue sombra de sujeto
  • Oclusión parcial: Objetos que tapan partes del sujeto
  • Resolución extremadamente baja: <100px en dimensión menor
Para estos casos, use el modo "Advanced" con ajuste manual de parámetros.

4. Módulo de Borrado Inteligente (In-painting con LaMa)

Basado en el modelo LaMa (Large Mask Inpainting) que utiliza una arquitectura de Fourier para rellenar grandes áreas faltantes:

4.1 Arquitectura Técnica de LaMa:

  • Fast Fourier Convolution (FFC): Opera en dominio de frecuencia para capturar contexto global
  • Receptive Field de 256×256: Puede "ver" patrones a gran escala
  • Percepción de estructura: Entiende geometría, textura y continuidad
  • Generación coherente: Crea contenido que mantiene consistencia con el entorno

4.2 Comparativa con Métodos Tradicionales:

Método Base Área Máxima Coherencia Velocidad
Clone Stamp Copia de píxeles Pequeña (<5%) Baja (repetitiva) Rápida
Content-Aware Fill Patch matching Media (<20%) Media Media
LaMa (Redimtools) IA generativa Grande (<60%) Alta Lenta

4.3 Parámetros de Configuración:

  • Tamaño de Máscara Óptimo: Cubrir objeto completo + 10% de margen
  • Resolución Recomendada: 512-1024px en dimensión mayor
  • Iteraciones de Refinamiento: 2-3 para bordes complejos
  • Umbral de Confianza: 85% para áreas críticas

5. Recorte con Transformación de Perspectiva (Homografía)

Sistema de corrección geométrica basado en álgebra lineal:

5.1 Matriz de Transformación Homográfica:

⎡ x' ⎤ ⎡ h₁₁ h₁₂ h₁₃ ⎤ ⎡ x ⎤
⎜ y' ⎟ = ⎜ h₂₁ h₂₂ h₂₃ ⎟ ⎜ y ⎟
⎣ w' ⎦ ⎣ h₃₁ h₃₂ 1 ⎦ ⎣ 1 ⎦

Donde:

  • (x, y): Coordenadas en imagen original
  • (x', y'): Coordenadas en imagen corregida
  • H: Matriz homográfica 3×3 (8 grados de libertad)
  • w': Factor de normalización (w' = h₃₁x + h₃₂y + 1)

5.2 Algoritmo de Cálculo (Direct Linear Transform):

  1. Selección de 4 puntos correspondientes (esquinas documento)
  2. Construcción de matriz A de 8×9 a partir de correspondencias
  3. Solución por SVD (Singular Value Decomposition) para encontrar H
  4. Aplicación de transformación bilineal inversa
  5. Re-muestreo con interpolación Lanczos
ERROR DE PROYECCIÓN:
La homografía asume que el documento es plano. Si hay curvatura (libro abierto), se producirá distorsión residual. Para documentos curvados, use el modo "Advanced" con ajuste manual de curvas.

6. Filtro de Realce - Convolución en Dominio Espacial

Implementación de máscara de agudización (unsharp mask) con control paramétrico:

6.1 Fórmula de Convolución:

I'(x,y) = I(x,y) + λ × (I(x,y) - I_blur(x,y))
Donde:
- I(x,y): Imagen original
- I_blur(x,y): Imagen suavizada (kernel Gaussiano)
- λ: Factor de realce (0-2.0 en nuestro sistema)
- I'(x,y): Imagen realzada

6.2 Parámetros del Kernel Gaussiano:

Intensidad Radio (σ) Tamaño Kernel Efecto
Suave 1.0px 5×5 Realce fino de bordes
Normal 1.5px 7×7 Balance detalle/ruido
Fuerte 2.0px 9×9 Realce dramático (puede crear halo)

6.3 Algoritmo de Aplicación Adaptativa:

  1. Análisis de frecuencia local (FFT en bloques 32×32)
  2. Detección automática de bordes (operador Canny)
  3. Aplicación selectiva (solo en bordes detectados)
  4. Limitación de ganancia para evitar sobre-saturación
MÉTRICAS DE CALIDAD POST-PROCESAMIENTO:
El sistema evalúa automáticamente:
  • PSNR (Peak Signal-to-Noise Ratio): >30dB considerado aceptable
  • SSIM (Structural Similarity): >0.95 indica preservación estructural
  • BRISQUE (No-Reference): <40 indica alta calidad perceptual
  • Artefact Score: Porcentaje de píxeles con halo/ringing

7. Pipeline de Procesamiento Completo

Flujo secuencial de operaciones aplicadas a la imagen:

ENTRADA → [1. Decodificación] → [2. Normalización] → [3. Redimensionado] →
[4. Filtrado] → [5. Transformación] → [6. Compresión] → [7. Codificación] → SALIDA

7.1 Orden de Operaciones Recomendado:

  1. Corrección de perspectiva (si es necesario)
  2. Recorte (eliminar áreas no deseadas)
  3. Redimensionado (ajustar a dimensiones finales)
  4. Eliminación de fondo (si se requiere transparencia)
  5. Realce de nitidez (compensar pérdida por downscaling)
  6. Rotación/Volteo (ajuste de orientación)
  7. Borrado de partes (eliminar objetos pequeños)
BUENAS PRÁCTICAS PARA CALIDAD MÁXIMA:
  • Trabajar en espacio lineal: Convertir sRGB → linear antes de procesar
  • Preservar bits profundos: Usar 16-bit/channel para operaciones múltiples
  • Evitar múltiples re-compresiones: Cada compresión JPEG añade artefactos
  • Redimensionar solo una vez: Cada interpolación degrada la imagen
  • Guardar en PNG para edición: Usar JPEG solo para entrega final
🆕 Funciones nuevas
  • Comparar formatos: con una imagen cargada, pulsa «Comparar formatos». Verás tu imagen en AVIF, WebP, JPEG y PNG a la vez, con el peso de cada uno; el más ligero se marca y puedes descargar el que prefieras. Ideal para elegir el formato más liviano sin perder calidad.
  • Texto (OCR): pulsa «Texto (OCR)» para extraer el texto de una imagen o de un PDF escaneado (español + inglés). Puedes copiarlo, descargarlo como .txt o generar un PDF buscable (con una capa de texto sobre la imagen).
  • Tipo de PDF al convertir: cuando conviertes una o varias imágenes a PDF (uses o no el editor), al pulsar «Convertir» puedes elegir entre PDF estándar (rápido, cada imagen es una página) o PDF buscable (añade una capa de texto invisible con OCR para poder buscar y seleccionar el texto). Cada opción muestra una breve explicación.
  • Editar un PDF como PDF: selecciona un PDF y pulsa «Editar». Se abren sus páginas reales y puedes pasar de hoja con las flechas, superponer imágenes (botón «＋ Imagen»), añadir marca de agua, anotaciones (texto, formas, flechas, emojis) y teñir el color de la hoja. Al generar, todo queda incrustado en el PDF final.
  • ¿Qué formato me conviene?: un asistente que, según tu objetivo (web ligera, compatibilidad máxima, transparencia, impresión o foto de iPhone), elige por ti el formato recomendado.
  • 🎚️ Calidad con peso en vivo: al elegir AVIF, WebP o JPEG aparece un control de calidad que muestra el peso estimado en tiempo real y te permite descargar exactamente esa calidad.
  • Más idiomas en el PDF buscable (OCR): además de español e inglés, el reconocimiento de texto admite portugués, francés y más idiomas según disponibilidad; el selector muestra solo los que están listos para usar.
  • Muchos más formatos de salida: además de JPG/PNG/WebP/AVIF/HEIC/TIFF/JPEG-XL, ahora puedes convertir a PDF, EPS, SVG (con la imagen embebida o vectorizada por trazado), Word (.docx) y PowerPoint (.pptx), PSD (Photoshop) y OpenRaster (.ora) —formato con capas que abren Krita y GIMP—, iconos ICO / ICNS y cursores .cur, más clásicos como JPEG 2000, TGA, PCX, SGI, QOI, PPM / PGM / PBM y XBM. Aparecen agrupados por tipo en el desplegable «Convertir a».

Herramienta de transcodificación capaz de procesar formatos de ingeniería, médicos y de consumo masivo. Soporta archivos que los navegadores web normalmente no pueden abrir.

Incluye además una suite PDF completa (ver secciones 10–12): imágenes ⇄ PDF, unir PDFs, marca de agua, reordenar páginas, comprimir, proteger con contraseña y anotaciones.

1. Flujo de Trabajo y Arquitectura

El convertidor implementa una arquitectura dual que permite manejar formatos tanto soportados por navegadores como especializados:

Proceso de Conversión:

  • Carga de Imagen: Soporta arrastrar y soltar o selección manual. Tamaño máximo recomendado: 20MB.
  • Detección Automática: El sistema identifica el formato de entrada y selecciona el endpoint apropiado del servidor.
  • Previsualización Inteligente: Para formatos no soportados por navegadores (TIFF, DDS, HEIC, DICOM), genera una imagen proxy temporal.
  • Conversión Backend: Todas las operaciones pesadas se realizan en el servidor Python con bibliotecas especializadas (PIL, OpenCV, imageio, pydicom).
  • Descarga Segura: Los archivos se eliminan automáticamente después de la descarga o al cerrar la sesión.

2. Matriz de Formatos Soportados

Formato Extensión Uso Principal Tipo de Compresión Limitaciones/Notas
JPEG .jpg, .jpeg Fotografía general, Web. Lossy (Con pérdida) No soporta transparencia. Calidad ajustable.
PNG .png Gráficos, UI, Logos. Lossless (Sin pérdida) Soporta canal Alpha (transparencia completa).
WebP .webp Web moderna de alto rendimiento. Híbrido (Lossy/Lossless) 30% más eficiente que JPEG. Soporta animación y transparencia.
AVIF .avif Web de última generación. Altamente eficiente Basado en AV1. Soporta HDR y profundidad de 10/12 bits.
TIFF .tiff, .tif Impresión editorial, escaneo. Lossless / LZW Archivos muy pesados, calidad máxima. Soporta múltiples capas.
HEIC .heic Fotografías de iPhone/Apple. Alta eficiencia (HEVC) Requiere bibliotecas especiales. Incompatible con Windows antiguo.
DICOM .dcm Imágenes Médicas (Rayos X, MRI). Contenedor + RAW Preserva metadatos médicos. Requiere ajustes de contraste para visualización.
DDS .dds Texturas de Videojuegos (DirectDraw). Compresión por bloques Específico para GPU. Múltiples variantes disponibles.
JPEG-XL .jxl Formato moderno sucesor de JPEG. Extremadamente eficiente Soporta HDR, transparencia y animación. Adopción limitada actualmente.
JPEG-LS .jls Imágenes médicas y científicas. Lossless/Near-lossless Optimizado para imágenes continuas (radiografías).
BMP .bmp Windows, aplicaciones legacy. Sin compresión Archivos muy grandes. Máxima compatibilidad.
GIF .gif Animaciones simples, memes. LZW (Limitado a 256 colores) Ideal para gráficos con pocos colores.
PDF .pdf Compartir documentos, contratos y manuales. Sin pérdidas para texto; Con pérdidas para imágenes (JPEG/JBIG2). Difícil de editar sin herramientas especiales.
SVG .svg Logos e iconos que escalan sin perder nitidez. Vectorial (XML) Se exporta con la imagen embebida o vectorizada por trazado.
EPS .eps Impresión profesional y diseño editorial. PostScript encapsulado Compatible con software de preprensa e ilustración.
Word .docx Insertar la imagen en un documento editable. Contenedor OOXML Documento de Microsoft Word con la imagen incrustada.
PowerPoint .pptx Colocar la imagen en una diapositiva. Contenedor OOXML Presentación de Microsoft PowerPoint.
Photoshop .psd Retoque y diseño con capas editables. Sin pérdida (por capas) Formato nativo de Adobe Photoshop.
OpenRaster .ora Edición por capas en software libre. Sin pérdida (por capas) Formato abierto que abren Krita y GIMP.
ICNS .icns Iconos de aplicaciones en macOS. Multi-resolución Agrupa varios tamaños en un mismo archivo.
CUR .cur Cursores personalizados en Windows. Mapa de bits Incluye el punto de arrastre (hotspot).
JPEG 2000 .jp2 Archivo de alta calidad, médico y patrimonio. Híbrido (Lossy/Lossless) Sucesor de JPEG con mejor calidad a igual tamaño.
TGA .tga Texturas y gráficos por computadora. Sin pérdida (RLE opcional) Soporta canal alfa (transparencia).
PCX .pcx Compatibilidad con software antiguo. RLE Formato clásico de PC Paintbrush.
SGI .sgi, .rgb Entornos SGI y efectos visuales clásicos. Sin pérdida (RLE) Formato de imagen de Silicon Graphics.
QOI .qoi Codificación veloz sin pérdida. Sin pérdida «Quite OK Image»: rápido de codificar/decodificar.
Netpbm (PNM) .ppm, .pgm, .pbm Procesamiento científico y flujos sencillos. Sin pérdida PPM (color), PGM (grises), PBM (blanco y negro).
XBM .xbm Iconos monocromos heredados en sistemas X. Texto C (monocromo) Bitmap X11 muy ligero.

3. Características Especiales por Formato

DDS (DirectDraw Surface) - Para Desarrolladores de Videojuegos

El convertidor ofrece opciones específicas optimizadas para texturas 3D:

Variante DDS Codificación Interna Tasa de Compresión Caso de Uso Recomendado
DDS Sin Pérdida RGB/RGBA sin compresión 1:1 (Sin compresión) Texturas de alta prioridad donde la calidad es crítica.
DDS BC1 (DXT1) BC1/DXT1 6:1 Texturas opacas o con transparencia binaria (recortes duros).
DDS BC3 (DXT5) BC3/DXT5 4:1 Texturas con gradientes de transparencia suaves (humo, ventanas, efectos).
ℹ️ NOTA TÉCNICA SOBRE DDS:
Las variantes BC1 y BC3 utilizan compresión por bloques específica para GPU. Esto significa que:
  • La compresión/descompresión es hardware-acelerada en GPUs modernas.
  • Las dimensiones de la imagen deben ser múltiplos de 4 (requisito de la compresión por bloques).
  • Ideal para motores como Unity, Unreal Engine, y aplicaciones DirectX/OpenGL.

DICOM - Procesamiento de Imágenes Médicas

Características especiales para el formato DICOM:

  • Preservación de Metadatos: Mantiene información del paciente, equipo médico y parámetros de adquisición.
  • Ajuste Automático de Contraste: Aplica filtros de mejora para visualización óptima de radiografías.
  • Soporte para Modales: Compatible con CT, MRI, RX, Ultrasound, y otros formatos DICOM estándar.
  • Conversión Segura: Los metadatos sensibles pueden ser sanitizados según configuración.

HEIC - Conversión desde Dispositivos Apple

ADVERTENCIA SOBRE HEIC:
El formato HEIC utiliza el códec HEVC (H.265) que está sujeto a patentes. Al convertir desde HEIC:
  • Se requieren bibliotecas especiales (heif, libheif) en el servidor.
  • La conversión puede fallar si el archivo HEIC está corrupto o utiliza perfiles no soportados.
  • Algunas versiones de HEIC con características avanzadas (HDR, profundidad 10-bit) pueden no convertirse correctamente.

4. Detección y Procesamiento de Imágenes Derivadas

El sistema incluye un detector inteligente para imágenes con resoluciones embebidas en el nombre:

DETECCIÓN DE THUMBNAILS Y DERIVADOS:
Cuando subes un archivo como imagen_original.jpg_256x256 o foto.png_1024x768, el sistema:
  • Detecta automáticamente el patrón _ANCHOxALTO en el nombre.
  • Extrae las dimensiones reales de la imagen del contenido del archivo.
  • Procesa la imagen utilizando las dimensiones reales, no las del nombre.
  • Esto es crucial para sistemas que generan thumbnails automáticos.

Formatos compatibles con detección de derivados:

  • JPEG (.jpg, .jpeg)
  • PNG (.png)
  • WebP (.webp)
  • BMP (.bmp)
  • GIF (.gif)

5. Limitaciones y Restricciones Técnicas

RESTRICCIONES IMPORTANTES:

1. Formatos con Limitaciones de Entrada/Salida:
  • JPEG-LS (.jls): Solo puede ser formato de ENTRADA. No se puede convertir a JPEG-LS.
  • Imágenes Derivadas: No se pueden convertir a formatos especializados (DDS, DICOM, HEIC, etc.).
  • DICOM (.dcm): Limitado en opciones de salida debido a requisitos médicos.
2. Tamaño y Rendimiento:
  • Tamaño máximo recomendado: 20MB por archivo.
  • Conversiones complejas (DDS, HEIC, DICOM) pueden tomar hasta 2 minutos.
  • El rendimiento depende de la capacidad del servidor y la complejidad del formato.
3. Compatibilidad del Navegador:
  • AVIF requiere Chrome 85+ o Firefox 93+.
  • WebP animado requiere navegadores modernos.
  • JPEG-XL tiene soporte limitado (solo Chrome/Edge con flags).

6. Sistema de Previsualización Avanzada

Para formatos que los navegadores no pueden mostrar nativamente, el sistema implementa:

Arquitectura de Previsualización Proxy:

  • Generación en Servidor: Crea una versión PNG temporal de la imagen original.
  • Cache Inteligente: Almacena temporalmente las previsualizaciones para múltiples vistas.
  • Visualizador con Zoom: Incluye zoom 1x-4x y pan para inspección detallada.
  • Modal Dedicado: Ventana emergente para visualización a pantalla completa.

Formatos con Previsualización Proxy:

Formato Técnica de Previsualización Notas Adicionales
TIFF Convertido a PNG de 8-bit Se preserva la primera página en archivos multi-página.
DDS Extracción de capa base Para DDS con mipmaps, muestra solo el nivel 0.
HEIC Decodificación a JPEG Pérdida mínima de calidad en previsualización.
DICOM Ajuste de ventana/contraste + PNG Aplica LUT médica para mejor visualización.

7. Flujo de Trabajo Recomendado

MEJORES PRÁCTICAS:
  1. Verificar el Formato de Entrada: Asegúrate de que el archivo no esté corrupto.
  2. Usar Previsualización: Siempre revisa la previsualización antes de convertir.
  3. Seleccionar Formato Adecuado:
    • Web: WebP o AVIF para máxima eficiencia.
    • Impresión: TIFF o PNG lossless.
    • Videojuegos: DDS con compresión apropiada.
    • Médico: Conservar DICOM cuando sea posible.
  4. Verificar Dimensiones: Para DDS, asegurar que sean múltiplos de 4.
  5. Descargar Inmediatamente: Los archivos se eliminan automáticamente después de un tiempo.

8. Mensajes de Error Comunes y Soluciones

Error Causa Probable Solución
"No se pudo generar la vista previa" Formato no soportado o archivo corrupto Verificar que el archivo no esté dañado. Intentar con otro formato.
"Conversión fallida después de 2 minutos" Archivo muy grande o formato complejo Reducir el tamaño de la imagen o usar un formato más simple.
"Formato de salida no disponible" Restricciones en formatos derivados o especializados Usar JPEG, PNG, WebP, BMP o GIF como salida.
"Error de memoria del servidor" Imagen demasiado grande para procesar Redimensionar la imagen antes de convertir.

9. Consideraciones de Seguridad y Privacidad

POLÍTICA DE PROCESAMIENTO DE DATOS:

Para Imágenes Médicas (DICOM):
  • Los metadatos del paciente pueden contener información sensible.
  • El sistema puede configurarse para sanitizar automáticamente campos confidenciales.
  • Se recomienda revisar la configuración de privacidad antes de subir archivos DICOM.
Ciclo de Vida General de Archivos:
  1. Subida: Archivo almacenado en carpeta temporal aislada.
  2. Procesamiento: Operaciones realizadas en memoria o archivos temporales.
  3. Descarga/Eliminación: Archivos eliminados inmediatamente después de descargar o al cerrar/recargar la página.
  4. Sin Persistencia: No se mantienen copias de seguridad ni historial de archivos.

10. Imágenes ⇄ PDF y Unir PDFs

El recuadro « Imágenes a PDF ⇄ (Viceversa) / Unir PDFs» reúne tres funciones en un mismo sitio:

  • Imágenes → PDF: compón una o varias imágenes en un PDF. Cada página toma el tamaño de su imagen (sin márgenes blancos ni deformación); así, si más tarde reconviertes ese PDF a imagen, la recuperas idéntica.
  • PDF → Imágenes (viceversa): sube un PDF (hasta 20 páginas) y descarga cada página como imagen (PNG/JPEG) dentro de un ZIP. Si el PDF está protegido, te pedirá la contraseña.
  • Unir PDFs: combina varios PDFs (máx. 4, hasta 5 páginas cada uno) en un solo documento, respetando el orden en que los subes.

Incluye además un Editor de Maquetación que compone imágenes libremente en páginas A4 antes de exportar:

CÓMO FUNCIONA EL EDITOR:
  1. Coloca imágenes: arrastra las imágenes del panel lateral («Disponibles para colocar») sobre la página.
  2. Mueve y redimensiona: arrastra la imagen para moverla; usa las esquinas para cambiar su tamaño.
  3. Varias páginas: añade cuantas páginas necesites con «Nueva página»; se numeran solas.
  4. Devolver al panel: el botón rojo () de una imagen la devuelve al panel de disponibles.
  5. Exportar: «Convertir PDF» genera el documento final con todas las páginas compuestas.

11. Herramienta: Marca de Agua

Aplica un texto en diagonal (o al ángulo que elijas) sobre todas las páginas del PDF. La vista previa del editor refleja en tiempo real cómo quedará la marca.

Parámetro Valores Por defecto Descripción y recomendación
Texto Texto libre CONFIDENCIAL El contenido de la marca. Textos cortos en mayúsculas se leen mejor en diagonal.
Color Selector de color (hex) #FF0000 Color del texto. Combínalo con una opacidad baja para no tapar el contenido.
Opacidad 5 % – 100 % 30 % Transparencia de la marca. Para documentos legibles, 20–35 % es lo ideal.
Ángulo −90° a 90° 45° Inclinación del texto. 45° es el clásico diagonal; 0° la deja horizontal.
Posición Superior / Centro / Inferior Centro Ancla vertical: 12 % desde arriba, 50 % (centro) u 88 % desde arriba.
Tamaño de fuente 12 px – 120 px 48 px Tamaño del texto. Se escala automáticamente al tamaño real del PDF (A4).
Capa Encima / Debajo Encima «Encima» superpone la marca al contenido; «Debajo» la deja como fondo.
CENTRADO EXACTO: La marca se centra ópticamente sobre su punto de anclaje con precisión sub-milimétrica (error < 0,04 mm) en cualquier tamaño de fuente, manteniendo la dirección diagonal. No se desplaza hacia arriba ni hacia abajo aunque aumentes mucho el tamaño.

12. Otras Herramientas PDF

Herramienta Parámetros Qué hace
Reordenar páginas Arrastrar y soltar Cambia el orden de las páginas del documento antes de exportar.
Comprimir PDF Calidad 1 – 100 (por defecto 75) Recomprime las imágenes del PDF a JPEG. Menor calidad = archivo más ligero. 70–80 mantiene buen equilibrio.
Proteger con contraseña Contraseña (mínimo 4 caracteres) Cifra el PDF con AES de 128 bits. Sin la contraseña no se puede abrir. Guárdala: no hay forma de recuperarla.
Anotaciones y formas Texto, flechas, rectángulos, círculos, estrellas, emojis Añade marcas visuales sobre las páginas (color y tamaño configurables).
ORDEN RECOMENDADO: compón las páginas → aplica marca de agua/anotaciones → comprime si necesitas reducir peso → protege con contraseña como último paso.
🆕 Funciones nuevas
  • 🎁 Paquete de favicon completo: con tu logo cargado (o desde un emoji/letra), pon el nombre del sitio y pulsa «Descargar paquete favicon». Recibes un ZIP con favicon.ico, todos los tamaños PNG (16→512), apple-touch-icon, android-chrome, el site.webmanifest y el snippet <link> listo para pegar en el <head> de tu web. Todo lo que necesita un sitio, de una vez.
  • Favicon desde emoji o letra: escribe una letra (p. ej. «R») o pega un emoji (), elige el color y pulsa «Crear icono». Ya puedes descargar el paquete o convertirlo a .ICO — sin necesidad de subir ninguna imagen.
  • ↩️ Recuperar imagen desde un .ICO: suelta un archivo .ICO y el botón cambia a «Recuperar Imagen (PNG)». Como un .ICO guarda como máximo 256 px reales, puedes elegir el tamaño de recuperación (512, 1024 o 2048 px): la imagen se amplía con reescalado suave y realce de nitidez para que no se vea diminuta.
  • Editor del icono desde letra/emoji: además de la letra o emoji y su color, ahora eliges color de fondo, tipografía, redondez de las esquinas y margen, con una vista previa en vivo mientras ajustas.
  • 👀 Vista previa en contexto: mira cómo se verá tu icono en una pestaña de navegador (clara y oscura) y en la pantalla de inicio de un móvil; además, al escribir el nombre del sitio se actualiza en las vistas previas.
  • Icono «maskable» y SVG monocromo: el paquete incluye ahora un icono maskable para Android (se adapta a cualquier forma) y un SVG monocromo para el «pinned tab» de Safari.

El formato .ICO es un contenedor especial de Windows que alberga múltiples versiones de una imagen a diferentes resoluciones y profundidades de color. Nuestro generador de íconos permite crear archivos .ICO compatibles con todas las versiones de Windows y navegadores web (como favicon).

1. Flujo de Trabajo Avanzado

El proceso de conversión sigue un pipeline optimizado para garantizar la máxima calidad y compatibilidad:

1.1 Carga Inteligente de Imágenes

  • Límite de 4 imágenes: Puedes cargar hasta 4 imágenes simultáneamente, lo que permite generar múltiples íconos en un solo lote.
  • Soporte para formatos especiales: El sistema acepta formatos que los navegadores no pueden mostrar nativamente (HEIC, TIFF, DICOM, etc.) mediante un preprocesamiento en el servidor.
  • Detección automática de formato: Identifica el tipo de imagen y aplica el decodificador correspondiente.
  • Vista previa inmediata: Genera miniaturas de las imágenes cargadas para verificación antes de la conversión.

1.2 Preprocesamiento en el Servidor

Para formatos no soportados por el navegador, el sistema envía la imagen al servidor para obtener una versión compatible (JPEG o PNG) que se utiliza para la vista previa y posterior conversión. Este paso garantiza que cualquier imagen pueda ser procesada, independientemente de su formato original.

1.3 Conversión a ICO

Una vez preprocesadas todas las imágenes, se envían al servidor para la conversión final a formato .ICO. El servidor:

  1. Redimensiona cada imagen a los tamaños estándar de ícono (16x16, 32x32, 48x48, 64x64, 128x128, 256x256).
  2. Aplica la codificación adecuada para cada tamaño (BMP para tamaños pequeños y PNG para 256x256).
  3. Embeble todas las versiones en un único archivo .ICO (o en un archivo ZIP si se procesaron múltiples imágenes).
  4. Genera URLs de previsualización para cada ícono convertido, permitiendo una verificación detallada antes de la descarga.

1.4 Descarga y Entrega

El resultado final se entrega como un archivo .ICO (si se cargó una sola imagen) o como un archivo ZIP que contiene múltiples archivos .ICO (uno por cada imagen cargada). Cada archivo .ICO generado es completamente compatible con Windows (desde XP hasta 11) y navegadores web modernos.

1.5 Función Reversible: .ICO → Imagen ↩️

La herramienta también trabaja al revés: si sueltas (o seleccionas) un archivo .ICO, el sistema lo detecta automáticamente, entra en modo reversa y recupera la imagen original como PNG con transparencia.

  • Detección automática: al cargar un .ico, el botón cambia solo a «↩️ Recuperar Imagen (PNG)»; no tienes que activar ningún modo.
  • Máxima resolución: como un .ICO contiene varios tamaños (16×16, 32×32 … 256×256), se extrae siempre el frame de mayor resolución.
  • Transparencia intacta: el PNG resultante conserva el canal alfa (fondo transparente) del icono.
  • Descarga directa: «Descargar Imagen» te entrega el archivo <nombre>_recuperada.png.
🔁 IDA Y VUELTA: imagen → .ICO para crear tus favicons, y .ICO → imagen cuando necesites recuperar el gráfico original de un icono que ya tenías.

2. Codificación Híbrida para Máxima Compatibilidad

Un archivo .ICO moderno no es uniforme por dentro. Nuestra herramienta aplica una estrategia de codificación híbrida para garantizar la compatibilidad con sistemas antiguos y la mejor calidad en sistemas modernos:

Tamaño del Icono Codificación Interna Razón Técnica
16x16, 24x24, 32x32, 48x48, 64x64, 128x128 BMP (Bitmap) Máxima compatibilidad con versiones antiguas de Windows (XP, 7) y exploradores de archivos legacy. No tienen compresión, lo que garantiza que se muestren correctamente en todos los sistemas.
256x256 (Vista) PNG Embebido Introducido en Windows Vista. Usa compresión PNG para que el archivo .ico no pese demasiado, manteniendo soporte completo para transparencias alfa complejas. Ideal para pantallas de alta resolución.
RESULTADO PROFESIONAL:
Al descargar, obtienes un archivo .ICO (o un ZIP si son varios) listo para producción, que funcionará tanto en un favicon web como en una carpeta de Windows 11 o Windows XP.

3. Sistema de Previsualización Avanzada (Carrusel con Zoom)

Para garantizar la calidad del resultado, incluimos un visor de imágenes avanzado:

3.1 Modal de Carrusel

  • Navegación por imágenes: Permite revisar todas las imágenes originales y convertidas en un carrusel con flechas de navegación.
  • Títulos informativos: Cada imagen muestra su nombre o descripción.

3.2 Zoom y Desplazamiento (Pan)

  • Zoom con doble clic: Al hacer doble clic en una imagen, se amplía a 4x para inspección detallada de píxeles.
  • Desplazamiento con arrastre: Cuando la imagen está ampliada, se puede arrastrar para mover la vista.
  • Restablecer zoom: Un segundo doble clic restaura el tamaño original.

3.3 Previsualización en Tiempo Real

Antes de la conversión, puedes ver las imágenes originales en miniaturas. Después de la conversión, se muestran miniaturas de los íconos generados, que a su vez pueden inspeccionarse en el modal de carrusel.

4. Formatos de Entrada Soportados

El generador de íconos acepta una amplia gama de formatos, incluidos aquellos que los navegadores no pueden mostrar nativamente:

Formato Extensión Notas
JPEG .jpg, .jpeg Formato estándar de fotografía.
PNG .png Ideal para imágenes con transparencia.
WebP .webp Formato moderno de Google.
BMP .bmp Mapa de bits sin compresión.
GIF .gif Gráficos animados o estáticos.
HEIC .heic Formato de Apple, requiere preprocesamiento en servidor.
TIFF .tiff, .tif Formato de alta calidad, requiere preprocesamiento.
DICOM .dcm Imágenes médicas, requiere preprocesamiento.
LIMITACIONES DE ENTRADA:
  • Máximo 4 imágenes por lote: Para evitar sobrecargar el servidor y garantizar un procesamiento rápido.
  • Tamaño máximo por archivo: 20 MB. Imágenes más grandes pueden fallar por tiempo de procesamiento.
  • Formatos no soportados: Algunos formatos RAW de cámaras pueden no ser compatibles. Se recomienda convertirlos a JPEG o PNG primero.

5. Limitaciones Técnicas y Rendimiento

5.1 Tiempos de Procesamiento

Los tiempos varían según el tamaño y la cantidad de imágenes:

  • Imágenes pequeñas (menos de 1 MB): 2-5 segundos por imagen.
  • Imágenes grandes (hasta 20 MB): 10-30 segundos por imagen.
  • Formatos complejos (HEIC, TIFF, DICOM): Pueden añadir 5-10 segundos adicionales por el preprocesamiento.

6. Buenas Prácticas para Generar Íconos

RECOMENDACIONES DE DISEÑO:
  • Imagen cuadrada: Para evitar distorsiones, usa una imagen con relación de aspecto 1:1.
  • Alta resolución: Comienza con una imagen de al menos 256x256 píxeles para obtener los mejores resultados en todos los tamaños.
  • Fondo transparente: Si deseas un ícono con formas no rectangulares, utiliza PNG con transparencia.
  • Simplicidad: Los íconos pequeños (16x16) deben ser simples, evita detalles finos que no se verán.
  • Colores contrastantes: Asegúrate de que el ícono sea reconocible incluso en tamaños pequeños.

7. Solución de Problemas Comunes

Problema Causa Probable Solución
El ícono no se muestra en Windows Falta de compatibilidad con versiones antiguas (codificación PNG en todos los tamaños). Nuestro generador ya usa codificación BMP para tamaños pequeños, que es compatible. Verifica que el archivo tenga las múltiples resoluciones.
El favicon no aparece en el navegador El archivo .ICO no contiene un tamaño 16x16 o 32x32. Asegúrate de que la imagen original sea lo suficientemente grande para generar estos tamaños.
Error al cargar archivo HEIC El servidor no tiene instaladas las bibliotecas HEIC. Contacta al administrador o convierte la imagen a JPEG/PNG antes de subirla.
La transparencia no se conserva Formato de origen no soporta transparencia (JPEG) o falla en la conversión. Usa una imagen PNG con transparencia como fuente.

8. Ejemplos de Uso

  • Favicon para sitio web: Genera un ícono .ICO con tamaños 16x16, 32x32 y 48x48 para compatibilidad con todos los navegadores.
  • Íconos de aplicaciones Windows: Crea un ícono con múltiples resoluciones (desde 16x16 hasta 256x256) para que se vea nítido en cualquier configuración de pantalla.
  • Lote de íconos: Convierte varias imágenes a íconos de una vez, ideal para proyectos que requieren múltiples iconos (como suites de software).
🆕 Funciones nuevas
  • Cuentagotas de color: con una imagen abierta, pulsa «Cuentagotas» y toca la imagen: obtienes el color exacto en HEX y se copia al portapapeles. Funciona con cualquier formato que el visor abra (incluso RAW o médicos).
  • Paleta: pulsa «Paleta» para extraer los colores dominantes de la imagen; haz clic en cualquiera para copiar su HEX.
  • ℹ️ Metadatos rápidos: pulsa «Metadatos» para ver dimensiones, formato, cámara, fecha y ubicación GPS (si la foto los tiene), con un enlace directo a Extract Analize para el análisis a fondo, llevando la imagen ya cargada.
  • Histograma RGB: muestra la distribución de rojo, verde y azul de la imagen; haz clic para ampliarlo en grande.
  • Laboratorio de comparación: con varias imágenes abiertas, pulsa «Comparar» para abrir un comparador profesional con zoom por panel (sincronizable) y estas herramientas: pipeta de color sincronizada (el mismo punto en ambas, con HEX y % de igualdad), medir área (píxeles y % de similitud), medir distancia, superponer A/B con divisor, mapa de diferencias, histograma RGB, lupa, canales R/G/B y grises, cuadrícula, cabeceras (firma real del archivo), zoom 1:1 e intercambiar. El tamaño de cada imagen se muestra en su panel.
  • 🧰 Barra de herramientas compacta: los botones laterales ahora son solo iconos y muestran su nombre al pasar el cursor, para aprovechar mejor la pantalla.
  • Aún más formatos: el visor abre también QOI, ICO, ICNS, CUR, JPEG 2000, SGI, FITS, OpenRaster (.ora) y más RAW de cámara, además de todo lo que ya soportaba.
  • ⌨️ Atajos de teclado: ←/→ para navegar entre imágenes, +/− para el zoom y 0 para restablecer la vista.

El Visor Universal Redimtools es una herramienta avanzada de visualización que soporta más de 50 formatos de imagen, incluyendo formatos especializados médicos, de cámara RAW, vectoriales y antiguos. A diferencia de los visores convencionales, implementa un sistema híbrido que combina renderizado nativo del navegador con conversión en tiempo real en servidor para formatos no soportados.

ARQUITECTURA HÍBRIDA:
El visor opera en dos modos simultáneos:
  1. Renderizado Nativo: Para formatos estándar (JPEG, PNG, WebP, BMP, GIF) que el navegador puede procesar directamente
  2. Conversión en Servidor: Para formatos especializados, genera vistas previas PNG en tiempo real mediante 5 endpoints especializados
  3. Pipeline Inteligente: Detección automática de formato y enrutamiento al procesador adecuado

1. Matriz Completa de Formatos Soportados

El visor categoriza los formatos en 6 grupos principales según su naturaleza y método de procesamiento:

1.1 Formatos Universales (Renderizado Nativo):

Formato Extensiones Soporte Navegador Limitaciones
JPEG .jpg, .jpeg Universal Sin transparencia, compresión con pérdida
PNG .png Universal Archivos grandes sin compresión eficiente
WebP .webp Chrome 25+, Firefox 65+ Soporte limitado en Safari antiguo
BMP .bmp Universal Sin compresión, archivos muy grandes
GIF .gif Universal Limitado a 256 colores, compresión básica

1.2 Formatos de Cámara RAW (Procesamiento Servidor):

  • Canon: .cr3, .cr2, .crw
  • Nikon: .nef, .nrw
  • Sony: .arw, .srf, .sr2
  • Fujifilm: .raf
  • Olympus: .orf
  • Panasonic: .rw2, .rwl
  • Pentax: .pef
  • Hasselblad: .3fr
  • Adobe DNG: .dng (formato RAW universal)

1.3 Formatos Médicos y Especializados:

Formato Extensión Ámbito Procesamiento Especial
DICOM .dcm Imágenes Médicas Preservación de metadatos, ajuste de ventana/contraste
JPEG-LS .jls Médico/Científico Compresión lossless, imágenes continuas
TIFF Médico .tiff, .tif Almacenamiento Médico Soporte multi-página, compresión LZW

1.4 Formatos Vectoriales y de Diseño:

  • Adobe: .psd (Photoshop), .ai (Illustrator)
  • CorelDRAW: .cdr
  • Escalables: .svg, .eps
  • CAD/Diseño: .dxf, .wmf
  • InDesign: .indd

1.5 Formatos Antiguos y de Nicho:

  • Gráficos antiguos: .pcx, .tga, .iff, .pict
  • Mapas de bits X: .xbm, .xpm
  • Portable Bitmap: .pbm, .pgm, .ppm
  • JBIG: .jbig, .jbig2, .jb2 (fax/compresión binaria)
  • Animados alternativos: .apng

1.6 Formatos Modernos y Especializados:

Formato Extensión Ventaja Principal Soporte Navegador
HEIC/HEIF .heic Alta eficiencia (HEVC) Muy limitado (requiere servidor)
AVIF .avif Compresión AV1, HDR Chrome 85+, Firefox 93+
JPEG-XL .jxl Sucesor moderno de JPEG Experimental (flags requeridos)
DirectDraw Surface .dds Texturas 3D (videojuegos) No soportado (requiere servidor)
ℹ️ DETECCIÓN DE FORMATOS DERIVADOS:
El sistema detecta automáticamente imágenes con resoluciones embebidas en el nombre:
  • Patrón reconocido: nombre_archivo_ANCHOxALTO.ext
  • Ejemplos: foto_800x600.jpg, imagen_1920x1080.png
  • Procesamiento: Ignora las dimensiones del nombre y extrae las reales del archivo
  • Uso típico: Thumbnails generados automáticamente por sistemas CMS

2. Interfaz y Funcionalidades de Usuario

2.1 Sistema de Carga Múltiple:

  • Límite simultáneo: 5 imágenes máximas
  • Métodos de carga:
    • Drag & Drop (arrastrar y soltar)
    • Click en área principal
    • Botón "Añadir" específico
    • Selector de archivos tradicional
  • Feedback visual: Indicador de arrastre, cambios de cursor

2.2 Navegación entre Imágenes:

Método Acción Condición
Flechas Laterales Anterior/Siguiente Solo visible con 2+ imágenes
Miniaturas Inferiores Salto directo Hasta 5 miniaturas visibles
Teclado Flechas ← → (planeado) En desarrollo

2.3 Sistema de Transformación Avanzada:

Transformaciones Disponibles:
  1. Zoom 4x: Doble click para ampliar, doble click para restaurar
  2. Arrastre (Pan): Click + arrastre en modo zoom
  3. Rotación: 90° incremental (botón dedicado)
  4. Volteo: Horizontal y Vertical (botones separados)
  5. Reset completo: Restaura estado original

2.4 Estados del Cursor (UX Intuitiva):

Estado Cursor Contexto
Sin imágenes pointer Área vacía - listo para cargar
Imagen normal default Visualización estándar
Zoom activo grab Listo para arrastrar
Arrastrando grabbing Arrastre en progreso
Drag & Drop copy Arrastrando archivos sobre el área

3. Panel de Herramientas Laterales

3.1 Funciones Disponibles:

Botón Icono Función Tecnología
Copiar Copia imagen al portapapeles Clipboard API + Canvas fallback
Voltear H ↔️ Reflejo horizontal CSS transform: scaleX(-1)
Voltear V ↕️ Reflejo vertical CSS transform: scaleY(-1)
Girar 90° ↻ Rotación horaria CSS transform: rotate(90deg)
Imprimir Ventana de impresión optimizada Window.print() + CSS print media
Descargar Descarga de imagen actual Anchor element + download attribute
Limpiar Reinicia visor completamente Location.reload()

3.2 Reloj en Tiempo Real:

  • Formato: HH:MM:SS (24 horas)
  • Fecha: Día de semana, DD/MM/AAAA
  • Actualización: Cada segundo (setInterval)
  • Estilo: Terminal verde sobre azul (estética retro)
FLUJO DE TRABAJO RECOMENDADO:
  1. Cargar imágenes por Drag & Drop o click
  2. Verificar previsualización - esperar indicador de carga para formatos complejos
  3. Navegar con flechas o miniaturas si hay múltiples imágenes
  4. Inspeccionar detalles con zoom de doble click
  5. Aplicar transformaciones si es necesario (rotar, voltear)
  6. Exportar mediante descarga o copia al portapapeles
  7. Limpiar cuando termines para liberar memoria

4. Sistema de Indicadores de Estado

4.1 Overlay de Carga:

  • Activación: Procesamiento de formatos complejos
  • Elementos: Spinner animado + texto descriptivo
  • Contador: Muestra número de imágenes procesándose
  • Desactivación: Automática al completar todas las conversiones

4.2 Estados de la Interfaz:

Elemento Estado Vacío Estado con Imágenes Estado Límite (5)
Área Principal Placeholder visible Imagen visible Imagen visible
Botón Añadir Oculto (click en área) Visible Oculto (límite alcanzado)
Flechas Navegación Ocultas Visibles (si 2+ imágenes) Visibles (si 2+ imágenes)
Miniaturas Vacías Miniaturas generadas 5 miniaturas visibles

5. Limitaciones Técnicas y Rendimiento

5.1 Límites del Sistema:

Parámetro Límite Razón
Imágenes simultáneas 5 Rendimiento de UI y memoria del navegador
Tamaño por archivo 20 MB recomendado Límites de transferencia y procesamiento
Tiempo de conversión 2 minutos máximo Timeout del servidor
Formatos RAW complejos Depende de bibliotecas Compatibilidad de LibRaw con modelo específico

5.2 Requisitos del Cliente:

  • Navegador: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
  • JavaScript: ES6+ obligatorio (async/await, Fetch API)
  • Clipboard API: Requerido para función de copiar (Chrome 66+, Firefox 63+)
  • Memoria: 100MB mínimo para procesamiento local

5.3 Tiempos de Procesamiento Estimados:

Tipo de Formato Tamaño Promedio Tiempo Servidor Tiempo Cliente
JPEG/PNG estándar 2-5 MB N/A (nativo) < 1 segundo
RAW de cámara 20-30 MB 10-30 segundos 2-5 segundos
PSD complejo 50-100 MB 15-45 segundos 3-7 segundos
Vectorial (AI/SVG) 1-5 MB 5-15 segundos 1-3 segundos
DICOM médico 10-50 MB 8-25 segundos 2-6 segundos
CASOS DE ERROR COMUNES:
  • Timeout del servidor: Archivos muy grandes (>50MB) pueden exceder el límite de 2 minutos
  • Formato no soportado: Algunos RAW propietarios muy nuevos pueden no tener soporte
  • Memoria insuficiente: Múltiples imágenes grandes pueden agotar memoria del navegador
  • Clipboard no disponible: Contextos inseguros (HTTP) o navegadores antiguos
  • Procesamiento fallido: Archivos corruptos o con estructura no estándar
Solución: Reducir tamaño de archivos, usar formatos estándar, actualizar navegador.

6. Sistema de Impresión Optimizado

La función de impresión genera una ventana específicamente optimizada para impresión en papel A4:

6.1 Características de Impresión:

  • Formato papel: A4 por defecto (21.0 × 29.7 cm)
  • Márgenes: 1cm en todos los bordes
  • Orientación: Automática (basada en relación de aspecto)
  • Calidad: Máxima resolución disponible
  • Escalado: Mantiene proporciones, maximiza tamaño dentro de márgenes

6.2 Pipeline de Impresión:

  1. Crear ventana emergente con contenido HTML minimalista
  2. Insertar imagen con CSS optimizado para impresión
  3. Aplicar reglas @page para control de márgenes
  4. Llamar a window.print() automáticamente al cargar
  5. Cerrar ventana después de 1 segundo (timeout de seguridad)

7. Consideraciones de Seguridad y Privacidad

POLÍTICA DE PROCESAMIENTO DE ARCHIVOS:

Para todos los formatos:
  1. Subida: Archivos enviados a servidor temporal con nombre aleatorio
  2. Procesamiento: Conversión a PNG/JPEG en memoria o archivos temporales
  3. Entrega: URLs temporales con tokens únicos y expiración
  4. Eliminación: Archivos fuente y resultados eliminados automáticamente después de:
    • Descarga completa por usuario
    • Cierre/recarga de la página
    • Timeout de 1 hora (máximo)
Específico para DICOM (imágenes médicas):
  • Metadatos sensibles: Información del paciente puede estar presente
  • Sanitización opcional: Configurable en servidor para remover datos personales
  • No persistencia: Las imágenes médicas nunca se almacenan permanentemente

8. Solución de Problemas y FAQ

8.1 Problemas Comunes y Soluciones:

Problema Causa Probable Solución
No se ven las imágenes Formato no soportado o archivo corrupto Verificar formato, intentar con JPEG/PNG de prueba
Error "procesando..." indefinido Timeout del servidor o error interno Recargar página, reducir tamaño de archivo
No funciona copiar al portapapeles Navegador antiguo o contexto inseguro (HTTP) Usar HTTPS, actualizar navegador, usar descarga alternativa
Impresión sale vacía Bloqueador de ventanas emergentes Permitir ventanas emergentes para el sitio
Límite de 5 imágenes alcanzado Límite intencional para rendimiento Limpiar visor o procesar en lotes separados

8.2 Preguntas Frecuentes:

  • ¿Se almacenan mis imágenes? No, todas las imágenes se eliminan automáticamente después de su uso.
  • ¿Qué formatos RAW soporta? Todos los formatos principales de cámaras DSLR y mirrorless.
  • ¿Puedo ver imágenes DICOM con ventana/contraste? Sí, el servidor aplica ajustes automáticos para visualización óptima.
  • ¿Funciona en móviles? Sí, con soporte táctil completo (zoom con pinch, arrastre).
  • ¿Requiere instalación? No, es completamente web-based.
  • ¿Límite de tamaño? 20MB recomendado, aunque algunos formatos pueden procesarse hasta 50MB.
🆕 Funciones nuevas
  • 📳 Reproducir por vibración: tras traducir a Morse, pulsa el icono de vibración y el móvil vibrará el código (puntos cortos, rayas largas). Funciona en móviles con motor de vibración; asegúrate de que el teléfono no esté en silencio/“No molestar” y de que la vibración del sistema esté activada. (En un PC no hay motor de vibración.)
  • Reproducir por destello (flash): pulsa el icono de la bombilla y la pantalla parpadeará el código en Morse. Toca la pantalla para detenerlo. Perfecto para señalizar a distancia o de forma accesible.
  • 🎧 Aprender Morse (método Koch): pulsa «Aprender» para practicar de oído: escuchas grupos de caracteres a velocidad real y escribes lo que oyes; cuando aciertas el 90% se desbloquea el siguiente carácter. Puedes ajustar la velocidad (PPM) y el tono (Hz), y tu progreso se guarda en el navegador.
  • 🎙️ Escuchar Morse (micrófono): pulsa «Escuchar Morse» y acerca la fuente del pitido al micrófono: la app detecta el ritmo (se adapta a tu velocidad) y lo va decodificando a texto en vivo. Requiere dar permiso de micrófono; funciona mejor con un tono limpio y constante.
  • Analizar un archivo de audio: dentro de «Escuchar Morse» también puedes subir un archivo (.mp3, .wav, .ogg…) y la app lo recorre con el mismo algoritmo, sin ruido de sala, para decodificarlo de una vez.
  • Decodificar Morse por luz (cámara): dentro de «Escuchar Morse», el botón « Detectar por luz» pide permiso de cámara y descifra el código a partir del parpadeo de una linterna (encendido/apagado), igual que con el sonido: mide el brillo de la imagen, detecta el ritmo, se adapta a tu velocidad y lo pasa a texto en vivo. Encuadra la luz en el recuadro; puedes cambiar entre cámara frontal y trasera e invertir la señal (para fondo claro). Funciona mejor a ritmo pausado y con fondo oscuro; requiere HTTPS y permiso de cámara.

El Codificador Morse de Redimtools es una herramienta de conversión bidireccional entre texto natural y código Morse. Integra reconocimiento de voz, síntesis de audio real generada en el servidor, un sistema de PIN para guardar y compartir mensajes cifrados, y un modo de expansión de paneles para trabajar con textos largos.

ARQUITECTURA DE LA HERRAMIENTA:
La herramienta opera en tres capas:
  1. Frontend (cliente): Interfaz dual de paneles, toolbar, reconocimiento de voz nativo del navegador (Web Speech API), síntesis de texto (SpeechSynthesis API).
  2. Backend (servidor): Endpoints REST que guardan y devuelven el mensaje ya cifrado tal cual (nunca lo descifran), gestión de PINs con expiración y generación de audio Morse real (.wav) con parámetros configurables.
  3. Almacenamiento temporal: Historial de mensajes ligado a un PIN, con expiración configurable; nunca se almacenan datos permanentemente.

1. Interfaz Principal — Paneles de Trabajo

La pantalla se divide en dos paneles principales separados por los botones de acción centrales:

1.1 Panel Izquierdo — Entrada

  • Área de texto libre: Escribe texto en español, inglés o francés para codificar/traducir a Morse, o escribe código Morse directamente para decodificar.
  • Botón expandir (⤢): Abre el panel en modo pantalla completa para textos largos. Los cambios se sincronizan automáticamente al guardar.
  • Botón copiar (): Copia el contenido del panel al portapapeles.
  • Botón micrófono (): Activa el reconocimiento de voz (ver sección 4).
  • Botón altavoz (🔊): Lee el texto en voz alta si es texto normal; si detecta código Morse, envía al servidor para generar el audio real de señales Morse.

1.2 Panel Derecho — Resultado

  • Área de resultado (solo lectura): Muestra el resultado de la operación seleccionada.
  • Botón expandir (⤢): Abre el resultado en pantalla completa con opciones de copiar y escuchar.
  • Botón copiar todo (): Copia el resultado completo.
  • Botón altavoz (🔊): Reproduce el resultado. Si es Morse, genera señal sonora real desde el servidor.
  • Botón descargar audio (): Descarga el audio Morse generado como archivo .wav (disponible en el modo expansión del panel derecho).

1.3 Barra de Herramientas Central

Botón Función Requiere PIN
🔵 Codificar Cifra el texto en tu propio navegador (extremo a extremo) con el PIN activo. El resultado ya cifrado aparece en el panel derecho; si se guarda, al servidor solo llega como texto ilegible. Sí (generado o ingresado)
🔴 Decodificar Descifra el texto en tu propio dispositivo usando el PIN activo. Solo funciona con contenido cifrado con ese mismo PIN. Sí (generado o ingresado)
🟢 Traducir Convierte texto normal a código Morse internacional estándar (.- -... -.-..) o Morse a texto, directamente en el cliente. No requiere PIN ni servidor. No
🟡 Limpiar Borra el contenido de ambos paneles. No
DIFERENCIA CLAVE — Codificar vs. Traducir:
Traducir convierte texto a Morse estándar internacional (punto = ., guion = -). Es una operación pública y reversible por cualquiera.

Codificar aplica un cifrado de extremo a extremo (E2E) con una capa de cifrado adicional vinculada al PIN activo. Todo ocurre en tu navegador y el resultado solo puede descifrarlo quien tenga ese PIN exacto. El mensaje se guarda tal cual, cifrado y sin descifrarse nunca, durante la vigencia del PIN (máximo 30 días exactos). Son dos funciones completamente distintas.

2. Selector de Idioma

La barra superior izquierda incluye un selector de idioma con tres opciones:

Idioma Afecta a
🇪🇸 Español Reconocimiento de voz (es-ES), síntesis de audio de texto plano
🇺🇸 English Reconocimiento de voz (en-US), síntesis de audio de texto plano
🇫🇷 Français Reconocimiento de voz (fr-FR), síntesis de audio de texto plano
ℹ️ NOTA: El idioma no afecta la traducción/codificación Morse, ya que el código Morse internacional es el mismo para todos los idiomas. Solo afecta las funciones de voz.

3. Sistema de PIN — Cifrado de Extremo a Extremo

El sistema de PIN es el núcleo de la función de codificación segura. Protege tus mensajes con cifrado de extremo a extremo (E2E): solo quien conoce el PIN puede leer el contenido.

PRIVACIDAD POR DISEÑO:
  • El cifrado y descifrado ocurren en tu propio dispositivo, dentro del navegador.
  • Tu PIN nunca se envía a nuestros servidores ni se guarda en ellos.
  • No podemos leer, descifrar ni recuperar tu contenido protegido: técnicamente no tenemos acceso a él.
  • Si guardas mensajes para sincronizarlos entre dispositivos, se almacenan ya cifrados; para el servidor son datos ilegibles.

3.1 Generar un nuevo PIN

  1. Haz clic en el botón 🟣 Generar en la barra de herramientas.
  2. La app genera un PIN de 5 dígitos único, que será tu clave para proteger y abrir tus mensajes.
  3. El PIN aparece en un modal. Cópialo y guárdalo — es la única vez que se muestra de forma destacada, y no podremos recuperártelo.
  4. Un candado verde () aparece en la interfaz indicando que hay un PIN activo.
ADVERTENCIA CRÍTICA SOBRE PINs:
  • Si generas un nuevo PIN mientras ya tienes uno activo, el sistema te pedirá confirmación — el PIN anterior y su historial asociado quedarán inaccesibles.
  • El PIN tiene una fecha de expiración configurable, con un máximo de 30 días. Por defecto los mensajes protegidos se conservan como mucho 30 días y luego se eliminan automáticamente; puedes elegir un plazo menor (hasta 30 minutos) en la configuración ().
  • No existe recuperación de PIN olvidado. Sin el PIN exacto de 5 dígitos, los mensajes codificados son irrecuperables.
  • Los PINs son generados, no elegidos. No puedes crear un PIN propio.

3.2 Ingresar un PIN existente

  1. Haz clic en el botón 🟠 PIN en la barra de herramientas.
  2. Ingresa los 5 dígitos del PIN (uno por caja, el cursor avanza automáticamente).
  3. Haz clic en Verificar. Con el PIN correcto, la app puede descifrar y abrir tus mensajes en tu dispositivo.
  4. Al verificarse correctamente, se abre automáticamente el historial de mensajes de ese PIN y un candado naranja () aparece en la interfaz.

3.3 Configurar tiempo de expiración

Una vez que tienes un PIN ingresado y verificado, puedes acceder al ícono de reloj (⏱) para configurar cuánto tiempo vivirán los mensajes cifrados asociados a ese PIN antes de eliminarse:

  • Las opciones van desde 30 minutos hasta un máximo de 30 días (30 min, 24 h, 3 días, 7 días, 2 semanas o 30 días). Pasado el plazo, el contenido se borra automáticamente.
  • El modal muestra la duración actual y la fecha exacta de expiración.
  • Cambiar el tiempo reinicia el contador desde el momento en que se aplica.
FUNCIÓN PRO / LIMITACIÓN: La configuración de tiempo de expiración requiere conexión con el servidor backend. Si el servidor no está disponible, esta función no operará. Las opciones de duración son definidas por el servidor, no por el usuario.

3.4 Ver historial del PIN

  • El historial muestra todos los mensajes codificados/decodificados guardados bajo ese PIN, ordenados por fecha (más reciente primero).
  • Cada entrada muestra: fecha, hora, y el texto (truncado a 90 caracteres si es largo).
  • Botones por entrada: Copiar (copia el texto completo) y Usar (pega el texto en el panel de entrada).
  • El fondo del historial usa imágenes aleatorias decorativas del servidor.
  • El modal muestra el tiempo restante antes de que el PIN expire, con actualización cada 60 segundos.

3.5 Eliminar PIN y historial

Dentro del modal de historial, el botón Eliminar PIN borra permanentemente los mensajes cifrados asociados a ese PIN y lo olvida en este dispositivo. Se pedirá confirmación antes de proceder. Esta acción es irreversible.

4. Reconocimiento de Voz (Dictado)

El micrófono usa la Web Speech API nativa del navegador. Haz clic en el ícono de micrófono para activarlo:

  • El ícono cambia a un cuadrado animado con ondas verdes durante la grabación.
  • La grabación se detiene automáticamente tras 10 segundos de silencio o al superar el tiempo máximo.
  • El texto transcrito aparece directamente en el panel de entrada.
  • También disponible en el modo de panel expandido.
LIMITACIONES DEL RECONOCIMIENTO DE VOZ:
  • Requiere HTTPS: No funciona en conexiones HTTP inseguras.
  • Compatibilidad: Chrome y Edge tienen soporte completo. Firefox tiene soporte limitado. Safari puede tener restricciones.
  • Requiere permiso de micrófono: El navegador pedirá autorización la primera vez. Si se deniega, la función queda deshabilitada hasta restablecer permisos.
  • No funciona offline: El reconocimiento requiere conexión a internet (usa servidores de Google/Microsoft según el navegador).
  • Ruido de fondo: Puede afectar la transcripción en entornos ruidosos.

5. Reproducción y Generación de Audio Morse

La herramienta distingue automáticamente si el contenido de un panel es texto plano o código Morse, y usa el método de reproducción apropiado:

5.1 Texto plano → Síntesis de voz (TTS)

Usa la API SpeechSynthesis del navegador. La voz y el idioma corresponden al selector de idioma activo. No requiere servidor.

5.2 Código Morse → Audio de señales reales

Cuando el panel contiene código Morse (puntos, guiones), el sistema genera en el servidor un archivo .wav con las señales de audio reales:

Parámetro de Audio Configurable Descripción
Frecuencia (Hz) 200 – 2000 Hz Tono del pitido Morse. El estándar telegráfico usa ~700 Hz.
PPM (Palabras por minuto) Configurable Velocidad de transmisión. Mayor PPM = señales más rápidas.
Forma de onda Configurable Tipo de onda del tono (sinusoidal, cuadrada, etc.).
Símbolo punto Configurable Carácter usado como punto (por defecto .).
Símbolo guion Configurable Carácter usado como guion (por defecto -).
Separador Configurable Carácter entre letras (por defecto espacio).
Espacio de palabra Configurable Carácter que representa separación entre palabras (por defecto /).

5.3 Configuración avanzada de audio

Accede al ícono de configuración () en la barra de herramientas para modificar los parámetros de audio. Los símbolos deben ser únicos entre sí — si dos parámetros usan el mismo carácter, el sistema rechazará la configuración.

ADVERTENCIA — Audio Morse requiere servidor:
La generación de audio Morse real no es local. Requiere que el backend esté operativo. Si el servidor no responde, el botón de audio mostrará un error. La descarga de audio (.wav) también depende de esta conexión.

6. Referencia Rápida — Código Morse Internacional

LetraMorse LetraMorse LetraMorse
A.-J.---S...
B-...K-.-T-
C-.-.L.-..U..-
D-..M--V...-
E.N-.W.--
F..-.O---X-..-
G--.P.--.Y-.--
H....Q--.-Z--..
I..R.-.ESPACIO/
NúmeroMorse NúmeroMorse
0-----5.....
1.----6-....
2..---7--...
3...--8---..
4....-9----.

7. Funciones sin conexión vs. Funciones que Requieren Servidor

Función Disponibilidad Notas
Traducir texto ↔ Morse Siempre disponible Procesado localmente en el navegador
Síntesis de voz (TTS) Siempre disponible API nativa del navegador
Reconocimiento de voz Requiere HTTPS + micrófono Compatible Chrome/Edge; Firefox limitado
Cifrar / Descifrar con PIN (E2E) En tu navegador El cifrado y descifrado ocurren localmente en tu dispositivo
Generar PIN Disponible El PIN es tu clave local; no se envía al servidor
Guardar / sincronizar historial entre dispositivos Requiere servidor activo El contenido se guarda ya cifrado; sin servidor no hay sincronización persistente
Audio Morse real (.wav) Requiere servidor activo Sin servidor: error al generar audio
Descarga de audio (.wav) Requiere servidor activo Solo desde panel expandido derecho

8. Solución de Problemas

Problema Causa probable Solución
Botón Codificar no responde No hay PIN activo Genera o ingresa un PIN primero
Error al generar PIN Servidor no disponible El sistema activa un PIN de demostración local (no persistente)
Micrófono no funciona HTTP / permiso denegado / navegador incompatible Usar HTTPS, verificar permisos, usar Chrome o Edge
Audio Morse no se reproduce Servidor no disponible o texto no es Morse válido Verificar conexión; asegurarse de que el texto contiene solo . - /
PIN inválido al verificar PIN incorrecto, expirado o eliminado Verificar los 5 dígitos; el PIN puede haber expirado
Símbolos de configuración rechazados Dos parámetros usan el mismo carácter Asignar un carácter único a cada campo (punto, guion, separador, espacio)
Traducción no reconoce caracteres especiales El Morse internacional no cubre todos los símbolos El carácter se devuelve sin cambios; usar solo letras A-Z, números 0-9 y espacios

8.1 Preguntas Frecuentes:

  • ¿Se almacenan mis mensajes codificados? Solo de forma temporal, ligados a tu PIN, y se eliminan automáticamente al expirar o al borrar el PIN.
  • ¿Puedo usar el mismo PIN en varios dispositivos? Sí, el historial es accesible desde cualquier dispositivo que tenga el PIN correcto.
  • ¿La traducción Morse es bidireccional automática? No; debes elegir explícitamente el botón Traducir. El sistema detecta si el texto es Morse o texto plano para el audio, pero la conversión requiere acción manual.
  • ¿Qué pasa si cierro la página con un PIN generado? El PIN generado (no ingresado) se pierde de la sesión. Si necesitas recuperarlo, debes tener anotado el código del modal.
  • ¿El sistema funciona sin internet? La traducción Morse básica sí. El resto (codificación, PINs, audio Morse) requiere conexión con el servidor.
🆕 Funciones nuevas
  • Consola en vivo: abre la vista previa y pulsa «Consola»: verás tus console.log y los errores de tu código (con línea) en tiempo real.
  • Copiar y 🔀 Remezclar: en cada diseño de la galería puedes copiar el HTML/CSS/JS por separado o todo junto, y remezclarlo a tu editor como copia nueva para modificarlo.
  • Licencia y etiquetas: al publicar eliges la licencia (libre, dominio público…) y etiquetas (botón, loader, formulario…). En la galería puedes filtrar por etiqueta y ordenar por Recientes / Más usados / Más gustados.
  • Comodidad: atajos Ctrl+S (guardar) y Ctrl+Enter (ejecutar), autoguardado (recupera tu borrador si recargas) y plantillas de arranque (botón, card, loader, formulario, navbar).
  • 📦 Importar paquetes npm (esm.sh): pulsa «npm» y escribe el nombre de un paquete (p. ej. canvas-confetti): se inserta el import y tu código se ejecuta como módulo, listo para usar la librería.
  • Insertar en tu web (embed): en cada diseño publicado de la galería, el botón de embed copia un <iframe> para incrustar el proyecto en tu propia página; se muestra aislado y de forma segura.

CodPen Lab es un entorno de desarrollo integrado (IDE) que funciona completamente en el navegador, sin instalación. Usa el motor de editor Monaco (el mismo motor de Visual Studio Code), e incluye explorador de archivos, pestañas múltiples, preview en tiempo real, galería de proyectos publicados, y detección de errores con barra de diagnóstico estilo VS Code.

ADVERTENCIA IMPORTANTE — FUNCIONES PRO Y LIMITACIONES:
CodPen Lab es una herramienta de frontend estático. Tiene limitaciones técnicas reales y no negociables que debes conocer antes de usarla:
  • El código backend NO se ejecuta en el preview (Python, PHP, Ruby, Go, Java, Node, etc.). Solo verás la parte HTML/CSS/JS.
  • Las bases de datos NO funcionan en el preview. SQL, SQLite, PostgreSQL y similares no tienen motor en el navegador.
  • El preview es estático: No hay servidor HTTP real; las peticiones a APIs propias fallarán si apuntan a localhost o rutas relativas del servidor.
  • No es un reemplazo de un servidor local. Para proyectos con backend, descarga el ZIP y ejecútalo en tu máquina.
ARQUITECTURA DE LA HERRAMIENTA:
CodPen Lab se compone de cuatro áreas principales:
  1. Explorer (izquierda): Árbol de archivos del proyecto activo. Permite crear, renombrar y eliminar archivos y carpetas.
  2. Editor central: Motor Monaco (VS Code) con resaltado de sintaxis, autocompletado, lint en tiempo real, búsqueda, y numeración de líneas.
  3. Preview (derecha): Iframe que renderiza el proyecto HTML/CSS/JS en tiempo real al hacer clic en "▶ Run" o con autorefresco.
  4. Galería: Repositorio de proyectos publicados por ti y la comunidad, con preview y descarga como ZIP.

1. Explorador de Archivos (Explorer)

El panel izquierdo muestra el árbol de archivos del proyecto activo:

  • Crear archivo nuevo (ícono +): Crea un archivo en la raíz o dentro de una carpeta seleccionada.
  • Crear carpeta nueva (ícono +): Crea una subcarpeta para organizar el proyecto.
  • Renombrar: Doble clic sobre el nombre del archivo o carpeta.
  • Eliminar: Botón de papelera al hacer hover sobre el archivo.
  • Seleccionar archivo: Clic simple abre el archivo en el editor y crea una pestaña.
ℹ️ TIPOS DE ARCHIVOS RECONOCIDOS:
Monaco detecta automáticamente el lenguaje según la extensión del archivo y aplica resaltado y linting correspondiente:
  • Frontend: .html, .css, .js, .ts, .jsx, .tsx, .json, .xml, .svg
  • Backend (sin ejecución en preview): .py, .php, .rb, .go, .rs, .java, .cs, .kt, .swift
  • Datos: .sql, .sqlite, .csv
  • Configuración: .env, Dockerfile, requirements.txt, package.json
  • Documentación: .md, .txt

2. Editor Monaco — Funcionalidades

El editor es una instancia completa de Monaco Editor v0.44 (el mismo motor de VS Code) con tema oscuro personalizado para Redimtools:

2.1 Resaltado de Sintaxis

Resaltado completo para todos los lenguajes reconocidos. El lenguaje se detecta automáticamente por extensión al abrir el archivo y se puede ver en la barra de estado inferior (etiqueta de lenguaje).

2.2 Autocompletado e IntelliSense

  • Sugerencias de propiedades CSS, etiquetas HTML, y funciones JavaScript de forma nativa.
  • Documentación inline al hover sobre funciones y propiedades.
  • Completado con Tab o Enter.

2.3 Detección de Errores (Lint)

Monaco resalta errores y advertencias en tiempo real mientras escribes:

  • Líneas con error: Fondo rojo sutil (rgba(255,68,102,0.08)).
  • Líneas con advertencia: Fondo amarillo sutil.
  • Barra lateral de errores (overview ruler): Marcadores rojos y amarillos en la barra derecha del editor muestran la posición de errores en el archivo completo, como en VS Code.
  • Actualización del lint: Se ejecuta 600ms después de dejar de escribir (debounce) para no interrumpir la escritura.

2.4 Búsqueda y Reemplazo

  • Atajo: Ctrl+F (buscar), Ctrl+H (buscar y reemplazar).
  • Los resultados se resaltan en amarillo (find highlight); el resultado activo en naranja.

2.5 Posición del Cursor

La barra de estado inferior muestra la posición del cursor en tiempo real: Ln X, Col Y.

2.6 Scrollbars Visibles

Las barras de desplazamiento vertical y horizontal tienen 14px de ancho (más gruesas que el estándar) para facilitar la navegación con ratón.

2.7 Indicador de Cambios Sin Guardar

Las pestañas muestran un punto azul (●) cuando el archivo tiene cambios no guardados. Guardar con Ctrl+S elimina el indicador.

3. Sistema de Pestañas

Cada archivo abierto genera una pestaña en la barra superior del editor:

  • Clic en pestaña → cambia al archivo correspondiente.
  • Botón en la pestaña → cierra el archivo (si tiene cambios sin guardar, puede perderlos).
  • El archivo activo tiene pestaña resaltada.
  • Las pestañas muestran el nombre del archivo y el ícono del lenguaje.

4. Preview en Tiempo Real

El panel de preview renderiza el resultado del proyecto en un <iframe>:

  • ▶ Run (botón verde): Actualiza manualmente el preview con el estado actual de todos los archivos.
  • Autorefresco: Si está activo, el preview se actualiza automáticamente 500ms después de cada cambio en el editor (debounce).
  • El preview carga el archivo index.html del proyecto como punto de entrada.
  • Recursos CSS, JS e imágenes referenciados en el HTML son resueltos dentro del sandbox del iframe.
LIMITACIONES DEL PREVIEW:
  • Sin servidor HTTP: Las rutas relativas de servidor (/api/..., fetch('/datos')) fallarán.
  • Sin backend: Código Python, PHP, Node, etc., no se ejecuta. Solo HTML, CSS y JavaScript del lado del cliente funcionan.
  • Sin base de datos: Cualquier conexión a DB fallará silenciosamente o lanzará error en consola.
  • Sin módulos Node/npm: import from 'express' u otros módulos de Node no funcionan. Solo APIs del navegador y CDNs externos.
  • Restricciones CORS: Llamadas a APIs externas pueden ser bloqueadas por políticas CORS del iframe.

5. Advertencia Automática de Backend/BD

CodPen Lab detecta automáticamente si tu proyecto contiene archivos de servidor o base de datos y muestra una advertencia contextual antes de:

Acción Mensaje de advertencia
Publicar proyecto Informa que los archivos backend no correrán en el preview de la galería, pero SÍ se incluirán en el ZIP de descarga.
Ver preview Advierte que solo verás el frontend estático; las llamadas a APIs o bases de datos fallarán.
Descargar ZIP Informa que el ZIP incluye archivos que necesitan un servidor local para ejecutarse, e indica los comandos básicos para correr cada tipo (Python, PHP, Node, SQL).

Los tipos de archivos que activan la advertencia son:

  • Backend: .py, .php, .rb, .go, .rs, .java, .cs, .kt, .swift, .lua, .pl, .r, .scala
  • Bases de datos: .sql, .sqlite, .sqlite3, .db, .mdb, .psql
  • Configuración de entorno: .env, Dockerfile, requirements.txt, Pipfile, Gemfile, Cargo.toml, Makefile, pom.xml, build.gradle

6. Galería de Proyectos

La galería muestra proyectos publicados. Al abrirla desde el header:

  • Muestra tarjetas de proyectos con nombre, autor y preview miniatura.
  • Ver preview: Abre el proyecto en modo visualización.
  • Descargar ZIP: Descarga todos los archivos del proyecto comprimidos.
  • Editar (si es tuyo): Carga el proyecto en el editor.
  • Los proyectos publicados con backend muestran un banner de advertencia en la galería.

7. Publicar un Proyecto

  1. Asegúrate de tener al menos un archivo index.html como punto de entrada.
  2. Haz clic en el botón Publicar en el header.
  3. Si el proyecto contiene archivos backend/BD, aparecerá la advertencia correspondiente. Puedes confirmar de todas formas.
  4. El proyecto queda disponible en la galería con un slug único (URL corta) que puedes compartir.
SOBRE LA PUBLICACIÓN:
  • Solo el frontend (HTML/CSS/JS) se renderiza en el preview público de la galería.
  • Los archivos backend se incluyen en el ZIP descargable pero no se ejecutan en línea.
  • No publiques archivos .env con credenciales reales, tokens de API o contraseñas.
  • La disponibilidad de los proyectos publicados depende del servidor de Redimtools.

8. Descarga del Proyecto como ZIP

El botón 📦 Descargar ZIP en el header descarga todos los archivos del proyecto activo comprimidos en un archivo .zip:

  • El ZIP incluye la estructura de carpetas completa.
  • Si hay archivos backend/BD, se incluyen con instrucciones de ejecución en la advertencia previa.
  • Comandos de referencia para ejecutar localmente según tipo de proyecto:
    • Python: pip install -r requirements.txt + python app.py
    • PHP: Servidor Apache / Nginx con PHP
    • Node.js: npm install + node server.js
    • SQL: PostgreSQL / MySQL / SQLite según el tipo de archivo

9. Barra de Estado (Status Bar)

La barra inferior del editor muestra en tiempo real:

  • Ln X, Col Y: Posición exacta del cursor.
  • Lenguaje activo: Nombre del lenguaje detectado para el archivo abierto (ej: "JavaScript", "HTML", "Python").
  • Número de errores y advertencias: Contadores de diagnósticos del lint de Monaco.

10. Atajos de Teclado Principales

Atajo Acción
Ctrl+S Guardar archivo activo (elimina indicador de cambios sin guardar)
Ctrl+F Buscar en el archivo actual
Ctrl+H Buscar y reemplazar en el archivo actual
Ctrl+Z Deshacer
Ctrl+Y / Ctrl+Shift+Z Rehacer
Ctrl+/ Comentar/descomentar línea(s) seleccionadas
Alt+Shift+F Formatear el documento (si el lenguaje tiene formateador)
Ctrl+G Ir a una línea específica
Ctrl+P Ir a un archivo rápidamente (si Monaco lo soporta en la configuración)

11. Funciones Offline vs. Funciones Online

Función Disponibilidad Notas
Editor Monaco (escribir, editar) Siempre disponible Cargado desde CDN de Cloudflare
Resaltado y lint Siempre disponible Monaco local
Preview de HTML/CSS/JS Siempre disponible Renderizado local en iframe
Preview de backend (Python, PHP, etc.) No disponible Técnicamente imposible sin servidor
Guardar proyecto en servidor Requiere servidor activo Persistencia entre sesiones
Publicar en galería Requiere servidor activo Genera slug único
Descargar ZIP Requiere servidor activo El ZIP se genera en el servidor
Ver galería de proyectos Requiere servidor activo Los proyectos están en el servidor

12. Solución de Problemas

Problema Causa probable Solución
El editor no carga / aparece en blanco CDN de Monaco no disponible o bloqueado Verificar conexión; desactivar bloqueadores de scripts; intentar desde otra red
Preview no actualiza Autorefresco desactivado o error de sintaxis crítico en HTML Hacer clic en ▶ Run manualmente; revisar errores en el editor
Preview muestra página en blanco Sin archivo index.html o HTML con errores graves Verificar que existe index.html en la raíz del proyecto
API calls en el preview fallan El preview es un iframe sandbox sin servidor Esto es una limitación técnica. Usar URLs absolutas de APIs externas (con CORS correcto)
Archivos no se guardan entre sesiones Proyecto no publicado / guardado en servidor Publicar o descargar ZIP antes de cerrar la sesión
Lint muestra muchos errores en archivos Python/backend Monaco lintea según gramática del lenguaje pero sin contexto de runtime Normal para archivos de servidor; usar el lint como guía de sintaxis básica
ZIP descargado no funciona al ejecutar Requiere dependencias o servidor local Seguir las instrucciones de la advertencia de backend (pip install, npm install, etc.)

12.1 Preguntas Frecuentes:

  • ¿Puedo usar librerías externas (React, Vue, jQuery)? Sí, mediante CDN en el HTML. Ejemplo: <script src="https://cdn.jsdelivr.net/npm/react/..."></script>. No se puede usar npm directamente.
  • ¿Puedo abrir archivos desde mi computadora? No directamente. Debes crear archivos en el explorador y pegar el contenido.
  • ¿Los proyectos son públicos? Los proyectos publicados en la galería son visibles para otros usuarios. No publiques código con credenciales o datos sensibles.
  • ¿Puedo usar TypeScript? Sí, Monaco reconoce y resalta .ts y .tsx, pero el preview no transpila TypeScript automáticamente. Necesitas incluir un compilador TS vía CDN o usar JavaScript directamente.
  • ¿El editor funciona en móvil? Monaco puede tener limitaciones en pantallas muy pequeñas o en teclados virtuales. Funciona mejor en tablets o escritorio.
  • ¿Hay un límite de tamaño de proyecto? Depende del servidor. Se recomienda no superar los 10MB entre todos los archivos del proyecto.
  • ¿Qué pasa si cierro el navegador sin guardar? Los cambios no guardados/publicados se perderán. Descarga el ZIP o publica antes de cerrar.
🆕 Funciones nuevas
  • Compartir hora: pulsa «Compartir hora», elige la fecha y hora en tu zona y genera el enlace. Puedes usar el botón « Compartir…» (abre WhatsApp, Facebook, Instagram, TikTok, Telegram… directamente) o los botones directos, además de copiarlo. Quien lo abra verá esa hora en SU propia hora local, con cuenta atrás, verá desde qué país se envió, y en el mapa se marcan ambas ciudades (la del emisor y la suya). Con el botón « Avisarme» recibe un recordatorio; además la cuenta atrás aparece en el título de la pestaña aunque esté en segundo plano.
  • Planificar (reuniones): pulsa «Planificar» y escribe cualquier ciudad (en español: Puerto Príncipe, Pekín, Lisboa…) o elígela de la lista. Verás una franja con la hora local de cada una; se resaltan las horas en que todas coinciden en horario laboral, y puedes ajustar el horario laboral (por defecto 9–18 h) según el país. Así encuentras el mejor momento para una reunión global.
  • Añadir al calendario: al compartir una hora, puedes añadirla a Google Calendar o descargar un archivo .ics. Se guarda al instante exacto, en la hora local de cada persona.
  • Insertar reloj en tu web: pulsa «Insertar reloj», elige la ciudad y el tema, y copia el código para incrustar un reloj en vivo de esa zona horaria en tu propia página.

Mundi Horario es una herramienta interactiva de mapa mundial que permite consultar, comparar y explorar zonas horarias de cualquier país del mundo en tiempo real. Combina un mapa vectorial de países clicables (Leaflet.js + GeoJSON), un buscador de ubicaciones, modales de información detallada, modo oscuro/claro, y un modo de comparación simultánea entre dos países.

ℹ️ ARQUITECTURA DE LA HERRAMIENTA:
Mundi Horario funciona de la siguiente manera:
  1. Mapa base: Renderizado con Leaflet.js sobre un tileset OpenStreetMap. Cada país es una capa GeoJSON interactiva con tooltip y clic.
  2. Datos horarios: Obtenidos en tiempo real de la API WorldTimeAPI o similar al hacer clic en un país.
  3. Datos de país (info ampliada): Consultados a una API de países (nombres, bandera, capital, moneda, idioma, continente, himno) bajo demanda.
  4. Reloj del usuario: Detectado automáticamente desde el navegador usando Intl.DateTimeFormat.

1. Navegación del Mapa

El mapa ocupa la pantalla completa y es completamente interactivo:

  • Zoom: Rueda del ratón, pellizco táctil (móvil), o botones + / − en la esquina superior izquierda del mapa.
  • Desplazamiento (pan): Clic y arrastra en escritorio; un dedo en móvil.
  • Tooltip de país: Al pasar el cursor sobre un país aparece su nombre en un tooltip oscuro flotante.
  • Clic en país: Abre el modal clásico con la información horaria de ese país.

2. Widget del Usuario (Tu Horario Local)

En la esquina superior derecha de la barra de navegación se muestra tu zona horaria local detectada automáticamente:

  • Muestra tu bandera (según zona horaria detectada), nombre de ubicación y hora actual en tiempo real.
  • La hora se actualiza en pantalla de forma dinámica.
  • Usa la API Intl.DateTimeFormat del navegador para detectar la zona — no requiere geolocalización del dispositivo.
LIMITACIÓN DEL WIDGET: La detección de zona horaria es basada en la configuración del sistema operativo del dispositivo, no en la ubicación física real. Si tu sistema tiene zona horaria incorrecta, el widget mostrará datos incorrectos.

3. Buscador de Países/Ciudades

La barra central de la navegación incluye un buscador con autocompletado:

  1. Escribe el nombre de un país o ciudad.
  2. Un dropdown de sugerencias aparece con resultados coincidentes (nombre y detalle de la región).
  3. Al seleccionar una sugerencia, el mapa hace fly (animación de vuelo) hasta esa ubicación, la centra y coloca un pin pulsante verde con animación de ondas.
  4. Si el lugar corresponde a un país con datos disponibles, se abre automáticamente el modal flotante con su información horaria.
ℹ️ BUSCADOR INTELIGENTE: El buscador puede encontrar tanto países como ciudades importantes. Al buscar una ciudad, el mapa vuela a su coordenada exacta pero la información horaria corresponde al país al que pertenece esa ciudad.

4. Modal Clásico — Información Horaria de País (Clic en mapa)

Al hacer clic en cualquier país del mapa, se abre un modal centrado con la información horaria completa:

  • Encabezado: Bandera del país y nombre completo con gradiente verde.
  • Tarjetas de zona horaria: Una tarjeta por cada zona horaria que tenga el país (algunos países tienen múltiples, como EE.UU., Rusia o Australia).

4.1 Contenido de cada tarjeta de zona horaria:

Campo Descripción
Nombre de la zona Nombre descriptivo de la zona (ej: "América/México_Ciudad")
ID de zona Identificador técnico IANA (ej: America/Mexico_City)
Hora actual Hora en tiempo real para esa zona, en formato HH:MM:SS
Offset UTC Diferencia con UTC (ej: UTC-6)
DST (Horario de verano) Indicador si la zona aplica horario de verano actualmente (badge verde "DST activo")

4.2 Panel de Información Ampliada (botón ℹ)

El encabezado del modal incluye un botón "i" circular que expande un panel con datos adicionales del país, cargados desde una API externa:

  • Capital oficial
  • Continente
  • Moneda (nombre y símbolo)
  • Idioma(s) oficial(es)
  • Población
  • Área en km²
  • Código ISO del país
  • Himno nacional: Si está disponible, aparece un botón pequeño para reproducirlo.
DATOS DE API EXTERNA: La información ampliada del país (capital, moneda, idioma, población, etc.) se obtiene de una API de terceros. Si la API no está disponible, aparecerá un indicador de carga o error. No garantizamos la disponibilidad permanente de esta API ni la exactitud de sus datos para todos los países.

5. Modal Flotante Arrastrable (Buscador)

Cuando un resultado del buscador abre información de un país, aparece un modal flotante arrastrable (en lugar del modal clásico centrado):

  • Se muestra en la esquina superior derecha de la pantalla por defecto.
  • Puedes arrastrarlo a cualquier posición dentro de la ventana haciendo clic en su encabezado (cursor "grab").
  • Contiene la misma información de zonas horarias que el modal clásico.
  • Permite revisar el horario de un país mientras sigues navegando el mapa.
  • Se cierra con el botón en la esquina del encabezado.

6. Toggle UTC / Hora Local

En la barra de navegación se encuentra un interruptor (toggle de estilo iOS) etiquetado UTC / Local:

  • Posición OFF (Local): Las horas mostradas en las tarjetas corresponden a la hora local de cada zona horaria.
  • Posición ON (UTC): Las horas mostradas se convierten a UTC para facilitar comparaciones globales.

7. Botones de Acción del Mapa

En la esquina superior derecha del mapa (bajo los controles de zoom de Leaflet) se encuentran tres botones flotantes:

Botón Función
🗺️ Capa TZ Activa/desactiva una capa visual de colores sobre el mapa que colorea las regiones según su zona horaria UTC. Una barra informativa en la parte inferior del mapa muestra el offset de la zona que estás mirando al pasar el cursor.
Comparar Abre el modo de comparación entre dos países (ver sección 8).
Tamaño real Permite extraer un país, estado o ciudad para poder comparar su tamaño real con otros países y ciudades.

8. Modo Comparación — Dos Países Simultáneos

El botón Comparar abre un modal de pantalla completa que divide la vista en dos paneles:

  • Cada panel tiene un mini-mapa interactivo propio (basado en Leaflet) centrado en el país seleccionado.
  • Bajo el mini-mapa, se listan las zonas horarias del país con sus horas en tiempo real.
  • Puedes seleccionar países distintos para cada panel y compararlos lado a lado.
  • Útil para planificar reuniones o comunicaciones entre dos regiones del mundo.
LIMITACIÓN DEL MODO COMPARACIÓN: Los mini-mapas del modal de comparación son instancias separadas de Leaflet. En dispositivos con poca RAM o en navegadores muy limitados, puede haber lentitud al renderizar ambos mapas simultáneamente. Se recomienda cerrar el modal cuando no se use.

9. Modal de Información Ampliada (Vista Completa)

Desde el panel de información del país (botón ℹ dentro de los modales), existe un enlace "Ver más" o botón para abrir un modal de información ampliada de mayor tamaño, que muestra todos los datos del país con más espacio visual.

10. Modo Oscuro / Claro

El botón 🌙 / ☀️ en la barra de navegación alterna entre modo claro (fondo blanco) y modo oscuro (fondo casi negro). El cambio es instantáneo y afecta:

  • Barra de navegación, modales, tarjetas de zona horaria.
  • El mapa base (tiles) cambia entre un tema claro y oscuro si el proveedor de tiles lo soporta.
  • Las transiciones de color son suaves (0.3s).

11. Responsive — Uso en Móvil

Mundi Horario está optimizado para pantallas pequeñas:

  • La barra lateral de publicidad (sidebar) se oculta en pantallas menores a 768px.
  • La barra de navegación se reorganiza en múltiples filas en pantallas pequeñas.
  • Los textos de los botones se ocultan y solo muestran íconos en pantallas muy pequeñas.
  • El modal flotante se reposiciona en la parte inferior en móvil.
  • El dropdown de búsqueda pasa a posición fija en pantallas muy pequeñas (<480px).

12. Funciones sin conexión vs. Funciones que Dependen de APIs Externas

ADVERTENCIA GENERAL: Mundi Horario depende de servicios de terceros (APIs de tiempo, APIs de países, tiles del mapa). Si alguno de estos servicios no está disponible, las funciones relacionadas fallarán. No garantizamos la disponibilidad permanente de ninguna API de terceros.
Función Disponibilidad Dependencia
Visualización del mapa base Requiere internet OpenStreetMap / Leaflet tiles
Capa GeoJSON de países Cargada una vez Archivo GeoJSON del servidor
Hora actual por zona API externa WorldTimeAPI u equivalente
Info de país (capital, moneda, etc.) API externa API de países (REST Countries u otra)
Himno nacional Solo si API lo proporciona Depende de la API de países
Buscador de ubicaciones API externa API de geocodificación
Widget hora local del usuario Siempre disponible API del navegador (Intl)
Modo oscuro / claro Siempre disponible CSS local
Comparación de dos países Requiere datos de API APIs de tiempo + países

13. Solución de Problemas

Problema Causa probable Solución
El mapa no carga / aparece gris Sin conexión a internet o tiles bloqueados Verificar conexión; desactivar VPN o bloqueadores de contenido
Clic en país no muestra hora API de zona horaria no disponible Intentar más tarde; la API puede tener límite de solicitudes
Panel de información del país no carga API de países no disponible Intentar más tarde; es un servicio externo
Buscador no encuentra la ciudad Ciudad no está en la base de datos de geocodificación Buscar por el nombre del país directamente
Mi horario local es incorrecto Zona horaria del sistema configurada incorrectamente Corregir la zona horaria en la configuración del sistema operativo
Modal de comparación muy lento Dispositivo con poca RAM o conexión lenta Cerrar otras pestañas; usar dispositivo con más recursos
Himno no reproduce El archivo de audio no está disponible en la API No todos los países tienen himno disponible en la API

13.1 Preguntas Frecuentes:

  • ¿Los horarios se actualizan en tiempo real? La hora en pantalla se actualiza en tiempo real usando el reloj del navegador una vez cargados los datos de la zona. La zona horaria en sí (offset UTC) se consulta al hacer clic y puede tener un leve retraso de red.
  • ¿Por qué algunos países tienen múltiples zonas horarias? Países grandes como EE.UU., Rusia, Australia, Brasil o Canadá abarcan múltiples zonas. El modal muestra una tarjeta por cada zona oficial del país.
  • ¿Funciona en móvil? Sí, con interfaz completamente adaptada. El mapa es táctil y los modales se ajustan al tamaño de pantalla.
  • ¿Se guarda algún dato personal? No. La herramienta no almacena historial ni datos del usuario. La zona horaria local se detecta solo en el navegador.
  • ¿El horario de verano (DST) se muestra correctamente? Sí, si la API de zona horaria devuelve el flag de DST activo, aparece en la tarjeta. Sin embargo, los cambios de DST dependen de la puntualidad de la API externa.
🆕 Funciones nuevas
  • Permisos de APK en lenguaje humano: al analizar una app Android (.apk), la pestaña de permisos ahora explica en cristiano qué hace cada permiso ( cámara, ubicación, leer SMS…) y su nivel de riesgo (alto/medio/info), ordenados por peligrosidad. Así entiendes a qué accede una app sin ser técnico.
  • Escaneo antivirus: junto a los hashes (MD5/SHA), el archivo se escanea con antivirus y verás si está limpio o si se detectó una amenaza — un mini-análisis privado, sin subirlo a terceros.
  • Exportar informe: descarga el análisis completo en JSON, CSV o PDF (imprimible) para guardarlo o compartirlo.
  • Borrar metadatos: en el análisis de una foto, pulsa «Descargar sin metadatos» para obtener una copia limpia, sin EXIF ni ubicación GPS.

Extract Analize es un analizador forense que inspecciona el contenido interno de un archivo sin ejecutarlo. Extrae metadatos de imágenes, examina la estructura de ejecutables de Windows (PE) y desmonta paquetes de Android (APK), mostrando los resultados en pestañas según el tipo de archivo detectado automáticamente.

TRES MOTORES EN UNO:
  1. Imágenes: EXIF, GPS, calidad y miniatura incrustada.
  2. Ejecutables PE: cabeceras, secciones, imports peligrosos, strings, packers e integridad.
  3. Android: manifiesto, permisos peligrosos, librerías nativas y árbol de archivos.
Parte del análisis de imágenes ocurre en tu propio navegador (EXIF/GPS); el análisis profundo se realiza en el servidor.

1. Formatos de Entrada Soportados

Categoría Extensiones Qué se analiza
Imágenes JPG, PNG, WEBP, HEIC, TIFF, y RAW (CR2, NEF, ARW, DNG…) Metadatos EXIF, coordenadas GPS, parámetros de calidad y miniatura.
Ejecutables Windows (PE) .exe, .dll, .sys, .ocx Estructura Portable Executable, tabla de imports, strings, empaquetadores.
Android .apk, .xapk, .aab Manifiesto, permisos, librerías nativas (.so) y contenido del paquete.

2. Análisis de Imágenes

Pestaña Contenido
GPS Coordenadas de captura (latitud/longitud), altitud y datos derivados. Permite ver, borrar o modificar la ubicación.
METADATA Todos los campos EXIF: cámara, lente, ISO, apertura, velocidad, fecha, software, orientación, etc.
CALIDAD Dimensiones, densidad (DPI), profundidad de color, perfil ICC y estimaciones de calidad.
MINIATURA Miniatura incrustada en el EXIF (si existe). A veces conserva una versión previa a ediciones.

3. Edición y Borrado de GPS (Privacidad)

CONTROLA TU UBICACIÓN: Las fotos suelen llevar la ubicación exacta donde se tomaron. Desde la pestaña GPS puedes:
  • Borrar GPS: elimina las coordenadas antes de compartir la foto.
  • Modificar GPS: introduce una latitud/longitud concretas.
  • Aleatorio: sustituye la ubicación por una al azar para despistar.
Tras editar, descarga la imagen limpia. Recomendación: borra siempre el GPS antes de publicar fotos en redes o portales.

4. Análisis de Ejecutables PE (EXE / DLL / SYS / OCX)

Pestaña Contenido
PE STRUCTURE Cabeceras DOS/NT, arquitectura, secciones (.text, .data…), timestamp de compilación y punto de entrada.
🔴 IMPORTS RISK Funciones importadas consideradas de riesgo (manipulación de memoria, red, procesos), útiles para detectar comportamiento sospechoso.
STRINGS Cadenas de texto legibles: URLs, rutas, claves, mensajes. Pistas sobre qué hace el binario.
PACKERS / INTEGRIDAD Detección de empaquetadores/ofuscadores (UPX, etc.) y comprobaciones de integridad.

5. Análisis de Android (APK / XAPK / AAB)

Pestaña Contenido
APK Nombre de paquete, versión, SDK mínimo/objetivo y datos del AndroidManifest.xml.
🔴 PERMISOS RISK Permisos solicitados, resaltando los peligrosos (cámara, micrófono, ubicación, SMS, contactos).
LIBS NATIVAS Librerías .so por arquitectura (arm64-v8a, armeabi-v7a, x86…).
ARCHIVOS Árbol completo del contenido del paquete (recursos, assets, DEX, etc.).

6. Análisis Común (para cualquier archivo)

Pestaña Contenido
FIRMA MÁGICA «Magic bytes» de cabecera: revelan el tipo real del archivo aunque la extensión mienta.
ENTROPÍA Medida de aleatoriedad (0–8). Valores altos sugieren cifrado o compresión/empaquetado.
HASHES Huellas MD5 / SHA para verificar integridad o buscar el archivo en bases de datos de malware.
HEX DUMP Volcado hexadecimal de los primeros bytes para inspección manual.

7. Recomendaciones de Uso

  • Antes de compartir fotos: revisa GPS y METADATA, y borra lo que no quieras exponer.
  • Ejecutables desconocidos: mira IMPORTS RISK, STRINGS y ENTROPÍA; una entropía muy alta + packer es señal de alerta.
  • APKs de fuentes no oficiales: revisa PERMISOS RISK; desconfía si pide permisos que no encajan con su función.
  • Verificar descargas: compara el HASH con el que publica el autor original.
SEGURIDAD Y PRIVACIDAD: Extract Analize nunca ejecuta los archivos, solo los lee. El análisis EXIF/GPS de imágenes se hace en tu navegador. Los archivos se procesan de forma temporal y no se conservan tras el análisis.

Preffind es un buscador de prefijos telefónicos internacionales y de cobertura de roaming de Claro Ecuador. Te dice a qué país o ciudad pertenece un número, en qué huso horario está y qué hora es allí ahora mismo, y si tu línea de Claro EC tiene convenio de roaming en ese destino.

HERRAMIENTA EXTERNA: Preffind se aloja aparte, en preffind.vercel.app. Al pulsar su tarjeta en la página de inicio se abre en una pestaña nueva. Los prefijos siguen el estándar internacional de numeración ITU-T E.164.

1. Búsqueda ( Buscar)

Un solo campo acepta tres tipos de consulta, con autocompletado mientras escribes:

Tipo de búsqueda Ejemplos Qué obtienes
Por prefijo +593 · 593 · 59399999 El país o ciudad al que pertenece, su huso horario y su prefijo.
Por país o ciudad Ecuador · Paris Su prefijo de marcación, la zona horaria y la hora actual.
Por operadora o paquete Movistar · Viajero América Los países cubiertos por esa operadora o paquete de roaming.

Puedes escribir el prefijo con + o sin él, e incluso pegar un número completo: Preffind aísla el prefijo por ti.

2. Mapa Mundial Interactivo (🗺 Mapa)

  • Clic en cualquier país: abre una ventana con la hora actual en sus husos horarios y el detalle del roaming de Claro Ecuador en ese destino.
  • Zoom: con los botones + y − de las esquinas del mapa, o con la rueda del ratón (más rápido).
  • ↺ Reset: devuelve el mapa a su vista y zoom iniciales.

3. Roaming Claro Ecuador ()

El botón « Roaming Claro EC» colorea el mapa según el convenio de roaming que aplica en cada país:

Color Significado Cobertura
🟠 Naranja Ecuador (origen) Tu país de origen: no aplica roaming.
🟢 Verde CAN y Viajero América El paquete CAN cubre Colombia, Perú y Bolivia; «Viajero América» amplía la cobertura a más países del continente americano.
🔵 Azul Viajero Mundo / Sin Límites Destinos intercontinentales (Europa, Asia, etc.).
⚫ Negro Sin convenio Claro Ecuador no tiene acuerdo de roaming en ese país.
ANTES DE VIAJAR: el color indica si existe un convenio, no las tarifas ni las condiciones de tu plan concreto. Confirma siempre con tu operadora qué paquete tienes activo y cuánto cuesta antes de usar datos en el extranjero.

4. Panel de Prefijos ()

Muestra la lista completa de países con su código de marcación internacional. Al pulsar cualquier código, la búsqueda se ejecuta sola y el país queda resaltado en el mapa.

5. Calculadora de Vuelo

El botón «Calcular Vuelo» estima el tiempo aproximado de vuelo entre dos ubicaciones. Combinado con la diferencia horaria, te permite saber a qué hora local llegarías.

ℹ️ ES UNA ESTIMACIÓN: calcula un trayecto aproximado; no tiene en cuenta escalas, rutas reales ni los horarios de las aerolíneas.

6. Historial (📜)

  • Guarda automáticamente tus últimas 10 búsquedas.
  • Se conserva al recargar la página, porque se almacena en tu propio navegador.
  • Pulsa cualquier entrada para repetir esa búsqueda al instante.
  • Limpiar historial borra todas las entradas guardadas.

7. Otros paneles

Panel Qué muestra
🕐 Hora actual La hora vigente en la ubicación consultada.
📶 Redes disponibles Las redes móviles que operan en el destino.
📘 Guía rápida Ayuda breve sobre cómo usar la herramienta.

8. Recomendaciones de uso

  • Si no reconoces un número que te llamó, pégalo entero: Preffind extrae el prefijo y te dice de dónde es.
  • Antes de un viaje, busca el destino y activa «Roaming Claro EC» para ver de un vistazo si tu línea tiene convenio allí.
  • Consulta la hora actual del destino antes de llamar, para no despertar a nadie a las 3 de la madrugada.
  • Usa el panel de Prefijos cuando quieras explorar en vez de buscar algo concreto.
PRIVACIDAD: el historial de búsquedas se guarda únicamente en tu navegador, no en un servidor. Al tratarse de una herramienta alojada aparte, su uso se rige además por las políticas de su propio alojamiento.

Herramienta: Calculadora de Unidades

Ubicada en el pie del Redimensionador. Permite conversiones bidireccionales en tiempo real.

  • Por Unidad: Convierte una sola dimensión.
  • Por Área: Calcula el área total (cm² o px²), útil para estimar costos de impresión o peso en memoria.

Política de Procesamiento de Datos

Seguridad Efímera:
Todas las operaciones pesadas (IA, conversión de formatos complejos) se realizan en nuestro servidor backend seguro.
Ciclo de vida de tus datos:
  1. Subes la imagen -> Se guarda en una carpeta temporal aislada.
  2. Se procesa -> Se genera el resultado en memoria o temporal.
  3. Descargas -> Inmediatamente después, o al cerrar/recargar la página, los archivos se eliminan permanentemente. No mantenemos historial ni copias de seguridad de tus archivos.