EdiThor Nummeros

EdiThor es el editor de piezas de marketing para NUMMEROS y CONTAX, parecido a Canva pero con todo lo de nuestras marcas ya cargado: plantillas, fotos, logos, colores y letras.

Qué hace

• Diseños (menú izquierdo, debajo de Inicio): los diseños del equipo ordenados en secciones (WhatsApp, Facebook, Instagram, TikTok, Impresos, Web y sistemas) y, dentro de cada una, apartados (por ejemplo WhatsApp → Estados, Canal de WhatsApp, Para enviar por chat). Se puede crear, renombrar y eliminar secciones y apartados; mover un diseño arrastrándolo a un apartado o con «Mover a»; y crear un diseño nuevo directo en un apartado. Las secciones son las mismas para todo el equipo (Firestore meta/carpetas); cada diseño guarda su apartado en el campo sec. Al eliminar un apartado, sus diseños pasan a «Sin clasificar».
• Candado: los diseños guardados se abren bloqueados, para que nadie mueva ni borre algo por accidente. Al intentar cambiar algo aparece una ventana para desbloquear (botón «Bloqueado» arriba). Las plantillas nuevas se abren desbloqueadas.
• En Diseños: cada diseño tiene «Mover a», Descargar (PNG, JPG, PDF, SVG o PowerPoint) sin abrirlo, Compartir y Eliminar. Con las casillas se eligen varios para descargarlos juntos en un ZIP, moverlos o eliminarlos. El apartado En varios tamaños muestra cada diseño junto a sus copias en otras medidas.
• Compartir por WhatsApp o Telegram: como imagen JPG, archivo PNG, PDF o SVG. En el celular y en Safari/Chrome de Mac se abre el menú de compartir del sistema; si no, se descarga el archivo y se abre WhatsApp Web o Telegram Web para adjuntarlo.
• Imágenes: una sola pestaña con tres partes: «De la marca», «Buscar» y «Mis imágenes» (subidas). En Buscar hay fotos libres de Openverse que se agregan con un toque; accesos a Google Imágenes y Pinterest (copiar la imagen y pegarla con ⌘ + V) y opción de pegar el enlace de una imagen.
• PowerPoint (.pptx): Descargar → PowerPoint arma una diapositiva por página, con los textos y rectángulos editables; fotos y logos van como imágenes. Se abre en PowerPoint o en Google Slides (Archivo → Importar). Para presentaciones conviene el tamaño «Presentación 16:9».
• Inicio: bienvenida con una foto de los clásicos de NUMMEROS, accesos rápidos a las plantillas y los diseños del equipo con un filtro por persona.
• Se ve como los demás sistemas de NUMMEROS: menú lateral menta, verde principal, Akshar en los títulos y Questrial en los textos (modo claro y oscuro).
• Al entrar aparece la pantalla de espera «los clásicos trabajando» del kit de marca durante unos 3 segundos.
• Plantillas de cada marca en versión clara y oscura: estado de WhatsApp, publicación 4:5 y cuadrada, comunicado, portada de Facebook, colaboración, foto de perfil de WhatsApp, folleto A4, tríptico (2 páginas), banner web y banner roll-up 85 × 200 cm.
• QR: pestaña QR para crear códigos de WhatsApp, página web, Telegram, correo, Wi-Fi o texto, con el logo de la marca en el centro. Plantillas de porta QR para acrílico (10 × 15 cm, 2 caras) y QR para redes.
• Mockups: marcos de laptop, celular, tablet y navegador para mostrar capturas de los sistemas; plantillas de mockup laptop, mockup celular y guía paso a paso (A4) para manuales.
• Descargas: PNG, PNG sin fondo, JPG, SVG (con las letras incluidas) y PDF; también solo lo seleccionado en PNG sin fondo o SVG.
• Copiar a otros tamaños: en Páginas (o en las opciones de la página → Tamaño) se eligen los formatos (estado, publicación 4:5, cuadrada, portada, banner…) y se crea un diseño nuevo por cada tamaño con el mismo contenido acomodado: los fondos y franjas se estiran, lo demás conserva su proporción y su lugar (arriba, centro o abajo). El original no cambia y cada copia se guarda en su apartado (por ejemplo, Estados).
• Texto justificado: además de izquierda, centro y derecha.
• Páginas: un diseño puede tener varias páginas (agregar, duplicar, mover, eliminar). Se descarga la página actual en PNG/JPG o todas juntas en PDF (las piezas de imprenta salen a su tamaño real en cm).
• Modo claro, oscuro o según el sistema, con el botón de la barra superior.
• Barras distribuidas: arriba del lienzo, las opciones rápidas del elemento elegido (letra, tamaño, color, recortar, quitar fondo, agrupar…); abajo, las páginas, la vista previa y el zoom.
• Paneles automáticos (botón en la barra superior): a los lados quedan solo los íconos; los paneles se abren al tocar un ícono, y al tocar un elemento del diseño se abren sus opciones.
• Menús al pasar el cursor: las pestañas de los lados, Descargar y el tema se muestran al pasar el cursor; un clic los deja fijos.
• Borde rojo: una línea roja marca el borde del diseño por fuera, y lo que se sale del borde se ve apagado (no sale en las descargas; se apaga en las opciones de la cuadrícula).
• Seleccionar (botón abajo): tocar y mover elementos sin que se abran la barra de opciones ni los paneles; al apagarlo, los menús vuelven.
• Páginas y descargas: cada diseño muestra cuántas páginas tiene. Al descargar un diseño con varias páginas se eligen el formato y qué páginas bajar (todas o algunas); varias imágenes llegan juntas en un ZIP. La vista previa también tiene Descargar y Compartir.
• Girar: fotos, textos, rectángulos, círculos, líneas, la N y el isotipo se giran con el punto redondo de arriba (se ajusta solo a 0°, 45°, 90°…; con Shift va de 15 en 15), con el botón «Girar» de la barra o escribiendo los grados.
• Grosor de línea: las líneas tienen el botón «Grosor» para escribir cualquier número (mínimo 0,5).
• Tamaño de letra: en la barra del texto se puede escribir el número exacto del tamaño.
• Cuadrícula (botón abajo o ⌘ + '): fina, media o gruesa, con líneas del centro y opción de pegar los elementos a la cuadrícula. No sale en las descargas.
• Vista previa en pantalla completa, con flechas para pasar las páginas.
• El lienzo no se escapa de la pantalla: el diseño queda centrado y solo se desplaza cuando está ampliado.
• Edición libre: mover, agrandar, cambiar textos, letras, colores, encuadre de fotos, transparencia y orden de capas.
• Copiar, cortar y pegar elementos con ⌘ + C, ⌘ + X y ⌘ + V (también entre diseños distintos). Pegar texto copiado de otra app crea un texto nuevo.
• Varios a la vez: Shift + clic o arrastrar un recuadro para elegir varios; moverlos, escalarlos, alinearlos, agrupar (⌘ + G) o unir en una sola imagen.
• Recortar: doble clic sobre una imagen; se arrastra la imagen dentro del marco y se mueven los bordes.
• Quitar fondo: gratis en el navegador (herramienta de IMG.LY, la primera vez descarga unos 40 MB) o con IA de OpenAI.
• Fotos y gráficos de marca: los clásicos de los números y el Contador Virtual; ilustraciones, íconos en relieve, elementos y patrones de NUMMEROS; ilustraciones, íconos en relieve blanco y azul noche, elementos, pasos, recortes del isotipo y tramas de CONTAX; la N y el isotipo de CONTAX en vector. En Imágenes → De la marca hay atajos para saltar a cada grupo.
• Subir imágenes propias (por ejemplo las que se generan en ChatGPT o Gemini), también pegándolas con ⌘ + V.
• IA (solo en la versión de GitHub): Claude escribe el prompt de la imagen y los textos con la voz de cada marca. OpenAI o Gemini (a elección) crean la imagen y la ponen directo en el diseño. También pueden mejorar una imagen ya puesta (subida, de la marca o generada); Claude puede mirarla y preparar la instrucción.
• Descargar en PNG o JPG.

IA: claves

En la pestaña IA → Configurar claves se pegan las claves. Basta Claude más OpenAI o Gemini:

• Claude: se crea en platform.claude.com → API Keys. Con el plan Max vienen USD 100 de crédito al mes para la API.
• OpenAI: se crea en platform.openai.com → API keys (la API se paga aparte de ChatGPT). OpenAI puede pedir verificar la organización antes de generar imágenes.
• Gemini: se crea en aistudio.google.com → Get API key. Los modelos de imagen de Gemini no tienen nivel gratis en la API: hay que activar la facturación.

Con la nube activa, las claves se guardan en Firestore (secrets/ia): aparecen solas en cualquier navegador y solo las leen las cuentas autorizadas en firestore.rules. Nunca están en este repositorio: un secreto de GitHub no sirve para esto, porque la página corre en el navegador y no tiene servidor.

Dónde se usa

• En línea: https://edithornummeros.contaxbolivia.com (GitHub Pages con dominio propio).
• Se entra con una cuenta de Google autorizada. Los diseños y las imágenes se guardan en Firebase (proyecto «EdiThor Nummeros»), así se ven desde cualquier computadora.
• Diseños compartidos: todos los usuarios ven y pueden cambiar los diseños de todos. Cada diseño guarda quién lo creó y quién lo cambió por última vez.
• Quién está editando: si alguien tiene un diseño abierto y desbloqueado, los demás ven «✎ Sol lo está editando» y, al intentar desbloquearlo, pueden mirar, hacer una copia o editar igual.
• Estados: cada diseño es Borrador, Para revisar, Aprobado o Publicado. En Diseños hay un apartado «Por estado».
• Versiones: se guarda una copia antes del primer cambio de cada sesión y otra cada 30 minutos de trabajo (las últimas 25). En Diseños → ⋯ → «Versiones anteriores» se ven y se puede volver a cualquiera.
• Papelera: lo eliminado espera 30 días en Diseños → Papelera y después se borra solo.
• Plantillas del equipo: Diseños → ⋯ → «Guardar como plantilla del equipo»; aparecen en Plantillas → Del equipo.
• Datos de las marcas: WhatsApp, web, correo, dirección y horario de cada marca (Inicio → «Datos de las marcas» o el menú de la cuenta). Las plantillas se llenan solas y, al cambiarlos, se pueden actualizar en todos los diseños guardados.
• Gasto de IA: en IA → Configurar claves se ve cuántas imágenes y textos usó cada persona en el mes, y se puede poner un tope de imágenes por persona.
• Espacio: en Diseños se ve cuánto ocupa la nube (el plan gratis tiene 1 GB). Las imágenes se achican antes de subir (máximo 2560 px, en WebP).
• Usuarios con acceso: [email protected], [email protected], [email protected] y [email protected].
• Si no hay internet al abrir, el editor guarda en el navegador; después, en «Mis diseños», se suben a la nube con un clic.

Firebase

• firebase-config.js: datos de la app web de Firebase (no son secretos).
• firestore.rules: quién puede entrar. Solo las cuentas de la lista pueden ver y guardar. Para dar acceso a alguien, se agrega su correo y se publican de nuevo las reglas en Firebase → Firestore → Reglas.
• Se usa Authentication (Google) y Firestore. Las imágenes se guardan dentro de Firestore en partes, así no hace falta el plan de pago de Storage.
• En Authentication → Configuración → Dominios autorizados deben estar edithornummeros.contaxbolivia.com y jmenachocntx.github.io.

Cómo está organizado

Carpeta	Contenido
index.html	Todo el editor (diseño y código) en un solo archivo
clasicos/, colaboracion/, mini/	Fotos de NUMMEROS y sus miniaturas
graficos/	Ilustraciones, íconos en relieve, elementos y patrones de NUMMEROS
fotos-web/, objetos-web/	Fotos del Contador Virtual y objetos 3D de CONTAX
graficos-contax/	Ilustraciones, íconos en relieve, elementos, pasos, recortes y tramas de CONTAX (exportados del kit Marca CONTAX)
marca/	Logotipos SVG de NUMMEROS para la interfaz, favicon e ícono de la app
png/	Logos de ambas marcas
fonts/	Letras: Akshar, Questrial y Adventor (reemplazo de Century Gothic)
firebase-config.js, firestore.rules	Conexión con Firebase y reglas de acceso
lib/qrcode.js	Librería para generar los códigos QR (qrcode-generator, licencia MIT)

Colecciones de Firestore: designs (diseños), images (imágenes en partes), trash (papelera), vers y vmeta (versiones), tpls (plantillas del equipo), editing (quién edita), usage (uso de IA por mes), users, secrets/ia (claves de IA) y meta (carpetas, datos de marcas, tope de IA).

Versiones

• Arriba, junto a «EdiThor», se ve la versión que estás usando (por ejemplo v30). Al tocarla se abren las Novedades de cada versión.
• EdiThor revisa cada 5 minutos (y al volver a la pestaña) si hay una versión más nueva. Si la hay, la etiqueta se pone amarilla («hay nueva») y aparece un aviso con el botón Actualizar (guarda tu diseño y recarga).
• Para cada actualización hay que subir la versión antes de hacer el commit: python3 herramientas/nueva-version.py "Qué cambió" — cambia APP_VER en index.html y agrega la nota en version.json.

Un diseño, varios tamaños

• Un mismo diseño puede tener varios tamaños dentro (Post 4:5, Estado, Cuadrada…). Botón de tamaños en la barra de abajo → cambiar de tamaño, + Agregar otro tamaño o quitar uno.
• Al agregar un tamaño, el contenido se acomoda solo al nuevo formato; luego se revisa y ajusta.
• En Diseños, el diseño aparece en el apartado de cada tamaño (por ejemplo, el Estado en WhatsApp → Estados). La tarjeta muestra todos sus tamaños en una fila: tocar uno lo elige (Abrir/Descargar usan ese) y tocarlo otra vez lo muestra en grande.
• En el editor, el panel de la derecha (sin nada seleccionado) muestra «Tamaños de este diseño» en miniatura para cambiar de uno a otro.
• Si hay copias sueltas de antes, arriba en Diseños aparece «Juntar todos».
• Al descargar, primero se eligen los tamaños (uno, varios o todos; varios llegan en un ZIP).
• Las copias sueltas de antes («En varios tamaños») se pueden Juntar en un solo diseño.
• Datos: fmts (cada tamaño con sus páginas; el abierto va en pages), fi (tamaño abierto) y fz (resumen para la lista: tamaño, apartado y miniatura).

Plantillas nuevas (las dos marcas, claro y oscuro)

• Fondo de pantalla de celular (1170 × 2532) y de computadora (2560 × 1440).
• Tarjeta de presentación 9 × 5 cm (frente y reverso, con QR de WhatsApp).
• Tarjeta de cumpleaños (1080 × 1350).
• Reconocimiento A4 horizontal (con dos firmas).
• Gift card 8,5 × 5,5 cm (frente con el valor y reverso con Para/De, código, vigencia y QR).
• Se guardan solas en las secciones nuevas «Fondos de pantalla» y «Tarjetas y reconocimientos».

Duplicar

• En Diseños, cada tarjeta tiene el botón Duplicar (dos cuadraditos) y también está en «⋯». Hace una copia completa (todas las páginas y tamaños) llamada «Copia de …», en el mismo apartado. Con varios seleccionados, la barra de arriba también tiene «Duplicar».

Tocar elementos

• Las partes transparentes de una imagen PNG (logos, ilustraciones) y el centro vacío de un marco ya no tapan lo que está debajo: si tocas un texto que tiene encima un logo transparente, se elige el texto y se abre su menú.
• Si un elemento tapa a otro, tocar otra vez el mismo lugar (sin arrastrar) elige el de abajo. En un texto, tocarlo otra vez (o doble clic) entra a escribir con el cursor justo donde tocaste.

Listas en los textos

• Botón de lista en la barra del texto (y «Lista» en el panel): Sin lista · Puntos (•) · Guiones (–) · Números (1. 2. 3.) · Incisos (a) b) c)) · Romanos (i. ii. iii.).
• Cada renglón (Enter) es un punto; los renglones vacíos no llevan marca. La marca queda colgando a la izquierda y el texto se alinea con sangría.
• Se exporta igual en PNG, JPG, PDF y SVG; en PowerPoint la marca va al inicio de cada renglón.

Mover y paneles

• Al mover con las flechas del teclado se ocultan los bordes azules de la selección; vuelven al soltar las flechas o al mover el mouse.
• Si un panel lateral (izquierda o derecha) queda encima del área de diseño, el diseño se corre y se achica para que el panel no lo tape, deslizándose suave en vez de saltar. Si el panel se abre justo al empezar a arrastrar, el diseño espera a que sueltes.
• La barra de arriba ya no cambia el tamaño del diseño al elegir distintos elementos.

Copiar y pegar

• Lo copiado se pega con el mismo formato (letra, tamaño, color, alineación, espaciado, etc.) y en el mismo lugar de donde se copió: en otra página u otro diseño queda exactamente igual (simétrico). Solo en la misma página, si ya hay algo justo ahí, se corre un poco.
• Copiar una parte del texto mientras escribes y pegarla afuera crea un texto con el mismo formato.
• Pegar texto de otra app con un texto elegido usa el formato de ese texto y lo pone debajo.

Páginas

• «Eliminar esta página» borra la página que estás viendo (antes el contenido de la borrada se copiaba sobre la siguiente).
• Cada página tiene una casilla: marca una o varias y usa «Eliminar las elegidas». Se recuperan con ⌘ + Z.

Nuevo diseño

• «Nuevo diseño» (Inicio, Diseños y arriba en Plantillas) siempre crea un diseño nuevo en blanco y pregunta el tamaño (y fondo claro u oscuro). Se guarda solo en el apartado de ese tamaño (o en el apartado donde estás en Diseños). También se puede elegir «Mejor usar una plantilla».
• «Duplicar» un diseño con varios tamaños copia solo el tamaño elegido en la tarjeta; los otros tamaños se agregan después con «+ Agregar otro tamaño».