Irdin
Creación de una tipografía digital completa (EOT, TTF, WOFF2) basada en la lengua Irdin, integrando flujos de diseño desde Figma hasta formatos web.
El objetivo principal de este proyecto es resolver un problema de accesibilidad tecnológica: la digitalización, documentación estandarizada y distribución de una escritura considerada primordial (la lengua Irdin, descubierta por Dakila Pesquisas) hacia formatos digitales y tipográficos modernos.
La plataforma no ejecuta un backend complejo ni procesa transacciones concurrentes; su lógica de negocio central radica en la inyección estática de contenido multilingüe y en la distribución optimizada de archivos de diseño (vectores tipográficos en OTF, TTF y WOFF2) a través de una arquitectura web ultrarrápida.
1. Funcionamiento General y Flujos de Trabajo
El proyecto funciona como un nodo central de distribución y documentación. Su utilidad principal recae en proporcionar a investigadores, académicos y diseñadores un acceso sin fricciones a recursos tipográficos, evitando que dependan de manuscritos o trazados no estandarizados.
El flujo de trabajo operativo se divide en dos fases principales, desde la concepción del activo hasta el consumo por parte del usuario final:
- Fase de Vectorización (Diseño a Código):
- El punto de partida de los datos son imágenes aisladas que representan cada símbolo del lenguaje.
- Utilizando Figma y un plugin especializado (Font Generator), prepare un flujo donde cada imagen se vectoriza y se transforma en un nodo glifo.
- Estos vectores son procesados por el plugin —apoyado por código alojado en GitHub Gists— para generar los binarios descargables (OTF, TTF, WOFF2, además de archivos CSS y HTML para pruebas).
- Fase de Distribución (Uso):
- El usuario accede a la plataforma web a través de un ruteador estático (
ClientRouter). - Al ingresar, un componente de navegación interconectado (
Topbar.astro) permite alternar de forma inmediata entre versiones locales del idioma (pt-br, en, es, ja). - La arquitectura estática inyecta la “metadata” técnica (autor, versión, fechas de publicación) en el DOM y proporciona al usuario la opción de solicitar la fuente mediante un enlace de contacto.
- El usuario accede a la plataforma web a través de un ruteador estático (
2. Arquitectura de Software y Modelado
Para el desarrollo del portal web, opté por una arquitectura basada en Static Site Generation (SSG) y un modelo de componentes aislados (Island Architecture) utilizando Astro. La elección de este patrón se justifica por la naturaleza del dominio: la información (datos sobre la fuente, autoría y orígenes históricos) es de muy baja mutabilidad. Un sistema SPA (Single Page Application) tradicional como React o Angular hubiese introducido sobrecarga de JavaScript innecesaria en el cliente, penalizando el SEO y el rendimiento (Time to Interactive).
Patrón Estructural: Component-Based SSG
El código está estructurado bajo una clara separación de responsabilidades:
src/layouts: Define el esqueleto maestro (Layout.astro), inyectando hojas de estilo globales, scripts de analytics de Vercel y metadatos SEO dinámicos (Astro.props).src/pages: Maneja el ruteo. Se utiliza un enfoque de páginas físicas para la internacionalización (i18n), con directorios específicos para cada idioma (en/,es/,ja/,pt-br/).src/components: Contiene entidades reutilizables sin estado mutacional (e.g., banderas SVG, efectos de ruido de fondo, componentes de navegación).
Modelo de Datos (Inyección de Estado)
El estado principal del dominio reside de forma inmutable dentro del propio componente de vista superior (e.g., index.astro).
classDiagram
class IndexPageData {
<<Struct>>
+Font font
+CallToAction cta
+Author author
+Links links
+Release release
}
class Font {
+String name
+String version
}
class CallToAction {
+String label
+String url
+String message (URI Encoded)
}
class Author {
+String fullName
+String email
+String websiteUrl
}
IndexPageData *-- Font
IndexPageData *-- CallToAction
IndexPageData *-- Author
En lugar de requerir llamadas a una API o a una base de datos externa, los datos se compilan AOT (Ahead of Time). Esto elimina la latencia de red y asegura la máxima disponibilidad del recurso de descarga.
Diagrama de Flujo: Ingesta Tipográfica a Web
El siguiente diagrama detalla la cadena de producción del núcleo del proyecto, partiendo desde los símbolos visuales hasta la interacción del usuario final.
flowchart TD
subgraph Creación Tipográfica [Figma Environment]
A[Imágenes Base Irdin] -->|Proceso Manual| B(Vectorización Individual)
B --> C[Font Generator Plugin]
C -->|GitHub Gists Scripts| D{Compilación de Fuente}
end
subgraph Activos Binarios
D --> E[Irdin-1.0.otf]
D --> F[Irdin-1.0.ttf]
D --> G[Irdin-1.0.woff2]
end
subgraph Plataforma Astro SSG [Web Distribution]
H[src/pages/index.astro] -->|Inyecta Datos| I[Layout.astro Base]
H -->|Renderiza| J[UI de Documentación]
I --> K[ClientRouter]
end
E -.->|Referenciado en| J
F -.->|Referenciado en| J
G -.->|Referenciado en| J
Usuario((Usuario)) -->|Accede| K
Usuario -->|Solicita Descarga| L[URL Parametrizada WhatsApp]
3. Stack Tecnológico
La selección del entorno de desarrollo asegura mantenibilidad, escalabilidad a nivel de distribución estática y estrictos controles de código.
| Capa | Tecnología | Justificación / Rol Arquitectónico |
|---|---|---|
| Framework Principal | Astro (v5) | Seleccionado por su arquitectura de islas y envío de “Cero JS”. Maneja el ruteo estático (ClientRouter) y la compilación de las vistas internacionales. |
| Lenguaje / Tipado | TypeScript | Integrado nativamente en Astro para proveer seguridad de tipos en la definición de metadatos (e.g., interface Props en Layouts) y validación en tiempo de compilación. |
| Estilizado | Tailwind CSS (v4) | Proveedor de utilidades de diseño a nivel atómico, acoplando el diseño responsivo directamente al marcado del componente, garantizando un CSS purgado y ligero en producción. |
| Testing (Unitario) | Vitest | Vitest se usa para probar lógica aislada, previniendo regresiones antes de cada build. |
| Linting y Formateo | Biome | Reglas estrictas configuradas para forzar convenciones de código coherentes en ficheros .astro, .ts y hojas de estilo a nivel de proyecto. |
| Analítica de Red | Vercel Analytics | Monitoreo inyectado en el cliente para cuantificar el tráfico y el flujo de los usuarios a nivel de página sin afectar drásticamente la carga de recursos de terceros. |
4. Conclusión Técnica
La web de la tipografía Irdin se estructura bajo un enfoque pragmático que da prioridad a la estabilidad y a la velocidad de entrega de contenido. Al aprovechar una arquitectura de Generación de Sitios Estáticos pura sobre Astro y trasladar la complejidad del procesamiento computacional al entorno de diseño inicial (Figma), se ha eliminado por completo la sobrecarga de un backend operacional. El resultado es un producto digital de extrema alta disponibilidad, asegurado contra regresiones a través de una sólida base de TypeScript y testing automatizado end-to-end, cumpliendo el requerimiento estructural de documentar de forma globalizada un recurso antropológico-lingüístico con un costo de infraestructura de servidor casi nulo.