Cargando...
Guía de la especificación
Cómo funciona OGraf — explicado de forma sencilla.
Tanto si eres diseñador, desarrollador o trabajas en una cadena, esta guía explica el formato OGraf en lenguaje claro y con ejemplos reales. No hace falta experiencia previa. Para la especificación técnica completa, consulta la documentación oficial de la EBU.
La visión general
Imagina que diseñas un rótulo inferior en After Effects. Hoy tendrías que exportarlo de forma distinta para cada sistema — una versión para CasparCG, otra para SPX, otra para Vizrt. Cada una con su propio formato, sus manías y sus limitaciones.
OGraf acaba con eso. Creas tu grafismo una sola vez como una pequeña página web (HTML + CSS + JavaScript), lo empaquetas en un formato estándar y se reproduce en cualquier sistema compatible con OGraf. El mismo archivo, en todas partes.
Tú creas
Diseña el grafismo con HTML, CSS y JavaScript — las mismas herramientas con las que se construyen las webs.
Tú empaquetas
Añade un archivo de manifiesto que describe tu grafismo — su nombre, sus campos de datos y su comportamiento.
Se reproduce
Cualquier sistema de playout compatible con OGraf (SPX, CasparCG, ograf-server…) puede cargarlo y ejecutarlo.
Los tres papeles en el ecosistema OGraf
Piénsalo así
Piensa en OGraf como en un PDF. Un PDF se ve igual lo abras en Adobe Reader, en Chrome o en Vista Previa. Un grafismo OGraf funciona igual se ejecute en SPX, en CasparCG o en cualquier otro sistema compatible. El formato es el contrato.
El flujo de trabajo OGraf
Cómo llega a antena un grafismo OGraf
Del editor de texto del diseñador a un fotograma de emisión en directo: estas son todas las etapas del flujo de trabajo OGraf — y dónde encaja cada parte del ecosistema.
Qué contiene un paquete
Un paquete OGraf no es más que una carpeta con unos pocos archivos. No necesitas ningún software especial para crearlo — puedes montarlo con cualquier editor de texto.
my-lower-third/
my-lower-third.ograf.json← El manifiesto (obligatorio)
graphic.mjs← El código de tu grafismo
style.css← Tus estilos
thumbnail.png← Imagen de vista previa
assets/
brand-font.woff2← Fuente personalizada
logo.svg← Logotipo o imágenes
Un paquete OGraf típico para un rótulo inferior
Hay dos archivos obligatorios: el manifiesto (.ograf.json) y el módulo JavaScript al que apunta su campo main. Todo lo demás depende de ti — incluye en el paquete las fuentes, imágenes, CSS o bibliotecas JavaScript que necesite el grafismo.
Para diseñadores de After Effects
Si usas herramientas como Ferryman o Loopic, generan este paquete por ti automáticamente. Diseñas de forma visual y la herramienta exporta una carpeta lista para OGraf. Sin programar.
El archivo de manifiesto
El manifiesto es un pequeño archivo JSON que presenta tu grafismo al mundo. Responde a preguntas como: ¿cómo se llama este grafismo? ¿Qué datos necesita? ¿Cómo se comporta?
Cuando alguien carga tu grafismo en SPX o en cualquier otro controlador, el controlador lee primero este archivo. Usa esa información para mostrar el nombre del grafismo en la lista de plantillas, generar formularios de introducción de datos para el operador y saber cómo controlar la reproducción.
my-lower-third.ograf.jsonJSON
{
"$schema": "https://ograf.ebu.io/v1/specification/json-schemas/graphics/schema.json",
"id": "com.mystation.lower-third",
"version": "1.0.0",
"name": "News Lower Third",
"description": "Standard two-line name and title overlay",
"author": {
"name": "Jane Smith",
"email": "jane@mystation.com"
},
"main": "graphic.mjs",
"stepCount": 1,
"supportsRealTime": true,
"supportsNonRealTime": false,
"schema": {
"type": "object",
"properties": {
"name": { "type": "string", "title": "Name", "default": "John Doe" },
"title": { "type": "string", "title": "Title", "default": "Reporter" }
}
}
}Veamos cada parte:
Piénsalo así
El manifiesto es como la parte trasera de la caja de un juego de mesa. Te dice el nombre del juego, cuántos jugadores admite, qué incluye y las reglas básicas — antes incluso de abrirla. Los controladores leen el manifiesto para saber cómo presentar y manejar tu grafismo.
Cómo cobra vida un grafismo
Cuando un operador pulsa "Play" en su controlador (como SPX), entre bastidores ocurre una secuencia precisa: el renderizador llama a estos métodos del grafismo, en este orden. Entender esta secuencia es la clave para entender OGraf. Los grafismos también pueden declarar acciones personalizadas — un destello de gol en un marcador, por ejemplo —, que los controladores muestran como botones adicionales y entregan mediante customAction().
1
load()
El grafismo recibe los datos del operador (nombre, cargo, colores…) y se prepara.
El operador introduce "Jane Smith" y "Reporter" en el formulario.
2
playAction()
El grafismo entra en pantalla con una animación. El rótulo inferior se desliza desde la izquierda.
El realizador pulsa Play. El rótulo con el nombre entra con una animación suave.
3
updateAction()
Los datos cambian mientras el grafismo está en antena. El texto se actualiza en directo.
El cargo cambia de "Reporter" a "Senior Correspondent" en mitad del programa.
4
stopAction()
El grafismo sale de pantalla con una animación. El rótulo inferior vuelve a deslizarse hacia fuera.
El realizador pulsa Stop. El grafismo sale con una animación limpia.
5
dispose()
Se limpia todo. Se libera la memoria. Listo para el siguiente grafismo.
El sistema elimina el grafismo de la memoria del renderizador.
El ciclo de vida de un grafismo OGraf durante una emisión en directo
Cada una de estas etapas es un método en tu código. El renderizador los llama en orden y espera a que cada uno termine antes de llamar al siguiente. Es decir: cuando le dices al renderizador "mi animación dura 500ms", lo respeta y no la interrumpe.
La idea clave
A OGraf no le importa cómo animas tu grafismo — transiciones CSS, JavaScript, GSAP, Lottie, canvas, SVG — todo vale. Solo le importa cuándo has terminado. Indica "estoy listo" y el renderizador continúa.
Pasos — para grafismos de varias páginas
No todos los grafismos son un simple rótulo inferior. Unos resultados electorales pueden tener 5 páginas. Un marcador deportivo puede actualizarse dinámicamente. OGraf lo resuelve con pasos.
stepCount: 0Lanzar y olvidar
Lanzado una vez, va de principio a fin por sí solo — entra, se mantiene y sale. No hay pasos que el operador tenga que avanzar.
Ejemplos: Cortinilla de repetición, transición tipo wipe, animación de bumper
▶️ Entra✨ Auto⏹️ Sale
stepCount: 1Un solo paso (el más habitual)
Aparece al reproducirlo, se mantiene visible y desaparece al detenerlo.
Ejemplos: Rótulo inferior, mosca, marca de agua con logotipo, reloj
▶️ Entra⏸️ Se mantiene⏹️ Sale
stepCount: 3Varios pasos
Cada Play avanza a la siguiente página. Stop sale desde cualquier página.
Ejemplos: Resultados electorales (3 partidos), grafismo con varias estadísticas, pase de diapositivas
▶️ Página 1▶️ Página 2▶️ Página 3⏹️ Sale
stepCount: -1Pasos dinámicos
El número de páginas depende de los datos — pueden ser 2 o 20.
Ejemplos: Tablas basadas en datos, clasificaciones en directo, listas con desplazamiento
▶️ Página 1▶️ ...▶️ Página N⏹️ Sale
Datos y formularios
La parte más potente de OGraf para los diseñadores: tú defines qué datos necesita tu grafismo y el controlador crea automáticamente un formulario para el operador. Sin necesidad de una interfaz a medida.
Esto se hace mediante el schema de tu manifiesto, con un formato llamado GDD (Graphics Data Definition). Que el nombre no te intimide — es solo una forma de decir "este grafismo necesita un campo de texto llamado Nombre y un selector de color llamado Fondo".
Lo que ve el operador
Breaking News
#2563eb
Izquierda ▾
500 ms
Lo que escribes en el manifiesto
"schema": {
"properties": {
"headline": {
"type": "string",
"gddType": "single-line",
"default": "Breaking News"
},
"bgColor": {
"type": "string",
"gddType": "color-rrggbb",
"default": "#2563eb"
},
"position": {
"type": "string",
"gddType": "select",
"enum": ["left","center","right"]
},
"duration": {
"type": "integer",
"gddType": "duration-ms",
"default": 500
}
}
}
Lo que ve el operador frente a lo que escribes en el manifiesto
Tipos de campo disponibles
El gddType indica al controlador qué tipo de campo mostrar. Estas son las opciones:
single-lineCampo de texto (una línea)
multi-lineÁrea de texto (varias líneas)
selectMenú desplegable con opciones
color-rrggbbSelector de color
color-rrggbbaaSelector de color con transparencia
file-pathSelector de archivos
file-path/image-pathSelector de archivos de imagen
percentageControl deslizante de porcentaje
duration-msDuración en milisegundos
Cada concepto de esta especificación se corresponde con algo real que puedes construir. Cada tutorial te guía por un grafismo OGraf completo — manifiesto, Web Component, animación, datos — en 10 a 25 minutos.
Ejemplos reales
Elige uno y constrúyelo. Cada ejemplo se entrega como un paquete OGraf que funciona.
Principiante15 min
Rótulo inferior
Nombre y cargo sobreimpresos
Principiante10 min
Mosca / EN DIRECTO
Indicador de esquina con pulso
Intermedio20 min
Ticker de noticias
Titulares en desplazamiento
Intermedio15 min
Cita a pantalla completa
Tipografía cinematográfica a pantalla completa
Intermedio20 min
Barras electorales
Gráfico de porcentajes animado
Intermedio20 min
Alineación deportiva
Cuadrícula con la plantilla del equipo
Avanzado25 min
Marcador
Marcador de partido en directo
Intermedio15 min
Cuenta atrás
Reloj que avanza solo
Intermedio15 min
Última hora
Alerta urgente a pantalla completa
Intermedio20 min
Previsión meteorológica
Condiciones actuales y previsión a 3 días
Principiante10 min
Tarjeta de redes sociales
Publicación sobreimpresa con avatar
Temas avanzados
Estas funciones son menos habituales, pero importantes para flujos de trabajo especializados.
Próximos pasos
Crea tu primera plantilla
Tutorial práctico. De cero a un rótulo inferior que funciona en 15 minutos.
Empezar a construir →
Especificación oficial de la EBU
La especificación técnica completa, con JSON schemas y tipos de TypeScript.
Leer la especificación →
Explora el ecosistema
Descubre editores, renderizadores, controladores y herramientas compatibles con OGraf.
Ver todas las herramientas →
Verifica tu paquete
Suelta un .zip y obtén un informe estructurado frente a 85 reglas y el schema actual de la EBU.
Abrir el verificador →