Documentacion

Guia de uso del generador de firmas

Esta guia explica que debes tener en cuenta para crear firmas consistentes, exportarlas bien y entender como esta construida la app en SvelteKit.

Volver al generador

1. Requisitos y contexto

  • Navegador moderno (Chrome, Edge, Firefox o Safari).
  • Datos de la persona: nombre, cargo, empresa, telefono, correo y enlaces sociales.
  • Imagenes optimizadas para avatar/logo (idealmente cuadradas y livianas para evitar firmas pesadas).
  • Validar branding: colores, tipografia y estilo segun la identidad de la marca.

2. Flujo recomendado de uso

  1. Completa la informacion base en las secciones Personal y Contact.
  2. Agrega redes solo si son necesarias para mantener la firma limpia.
  3. Define plantilla, estilo, fuente y colores en la seccion Design.
  4. Activa opciones extra (CTA o disclaimer) si tu equipo de marca las requiere.
  5. Revisa la vista previa y exporta en HTML o PNG segun el cliente de correo.
  6. Guarda un JSON para reutilizar la configuracion mas adelante.

3. Que tener en cuenta antes de exportar

  • HTML: ideal para Gmail y Outlook web. Haz una prueba enviando un correo real antes de distribuir.
  • PNG: util en clientes moviles o cuando el cliente de correo rompe estilos HTML.
  • Tamano: evita imagenes grandes y demasiados enlaces para no afectar carga ni entregabilidad.
  • Accesibilidad: usa contraste suficiente entre texto y fondo para mejorar lectura.
  • Consistencia: define una configuracion base por equipo y compartela via JSON.

4. Como funciona internamente en Svelte

  • La pagina principal vive en src/routes/+page.svelte y compone panel de formulario, preview y exportacion.
  • El estado global se maneja con signatureStore, que sincroniza los datos del formulario y la vista previa en tiempo real.
  • Las plantillas estan en src/lib/components/Templates y se renderizan segun la configuracion activa.
  • La exportacion HTML/PNG y la carga/descarga de JSON se centraliza en ExportPanel y utilidades de src/lib/utils.