Lleva tu contenido a todas las pantallas con un código

TEVIX es una aplicación para Smart TV, celular y computadora que se convierte en la aplicación de tu empresa. No necesitas publicar nada en las tiendas: tu público instala TEVIX, ingresa tu código y el dispositivo pasa a abrirse siempre directamente en tu contenido, con tu nombre, tu color y tu logo.

En 3 pasos

Elige el tipo de fuente

La "fuente" es el lugar de donde TEVIX obtiene tu contenido. Existen tres tipos. Empieza por el más simple para tu caso; puedes cambiarlo después sin modificar el código.

Sitio o reproductor web

Indica la URL completa. El dispositivo abre esa página en pantalla completa dentro de TEVIX. Funciona con cualquier sitio, pero para que se vea bien en la TV el sitio debe aceptar la navegación con flechas y OK (foco visible en los botones). Si ya funciona en el navegador de la TV, funcionará aquí.

Formato compatible (start.json)

Si ya tienes un start.json publicado para otra aplicación de TV, registra su URL (por ejemplo https://seusite.com/app/start.json). TEVIX entiende:

• parameter con menu:, content: y redirect:; los marcadores {PREFIX} y {SERVER} se completan con el protocolo y el host de tu start.json.
• Menú (headline, menu[] con label, icon, data como URL u objeto, execute, focus).
• Contenido en pages[].items[] con layout en la cuadrícula de 12×6 (o 16×8 con compress), y también template + items con {context:...} y action: "video:data".
• Tipos de ítem default, separate, teaser, button, space; campos title, titleHeader, titleFooter, label, image, icon, action, execute, focus.
• Acciones video:, audio:, link:, link:window:, content:, info:, reload:, back: y acciones múltiples [a|b].

Aún no compatible en este formato: plugins (video:plugin:, audio:plugin:), panel:, request:interaction: y propiedades extendidas. Esos ítems muestran un aviso en lugar de fallar.

Formato TEVIX

Es el formato más completo y, a la vez, simple: un archivo principal (tevix.json) con la identidad y el menú, y un archivo por página. Lo vemos a continuación.

tevix.json: identidad y menú

{
  "tevix": "1.0",
  "app": {
    "name": "Portal Ciudad",
    "tagline": "Noticias y Radio 98,7",
    "short": "PC",
    "color": "#E8452C",
    "logo": "logo.png"
  },
  "menu": [
    { "id": "inicio",   "label": "Inicio",   "icon": "home",  "content": "inicio.json" },
    { "id": "aovivo",   "label": "En vivo",  "icon": "live",  "content": "aovivo.json" },
    { "id": "noticias", "label": "Noticias", "icon": "news",  "content": "noticias.json" },
    { "id": "radio",    "label": "Radio",    "icon": "radio", "content": "radio.json" }
  ],
  "player": {
    "type": "audio",
    "title": "Radio Ciudad 98,7 FM",
    "subtitle": "En vivo",
    "url": "https://stream.suaradio.com.br/live.mp3"
  }
}

Páginas y bloques

Cada ítem del menú apunta a un archivo de página. La página tiene un título y una lista de bloques, de arriba hacia abajo.

{
  "title": "Inicio",
  "meta": "Actualizado hace 4 min",
  "blocks": [
    { "type": "hero", "items": [ "1 destacado grande + hasta 2 laterales" ] },
    { "type": "row",  "title": "Últimos videos", "items": [ "carrusel horizontal" ] },
    { "type": "grid", "title": "Noticias",       "items": [ "cuadrícula de tarjetas" ] },
    { "type": "list", "title": "Más leídas",     "items": [ "lista numerada solo con texto" ] }
  ]
}

Ítems

{
  "k": "Deportes",
  "title": "Ciudad FC gana y asume el liderato",
  "desc": "Un gol a los 43 del segundo tiempo aseguró la victoria.",
  "time": "hace 1 h",
  "image": "https://seusite.com/img/futebol.jpg",
  "action": "text:materia/1235.json"
}

Acciones

Las URL pueden ser relativas al archivo en el que están (materia/1235.json, ../videos/x.mp4). Un ítem sin action es solo informativo.

Plugins: contenido dinámico desde tu servidor

Los JSON estáticos resuelven la mayoría de las apps. Cuando el contenido necesita lógica en tiempo real (programación que cambia, reproductor con inicio de sesión, progreso en vivo, catálogo por usuario), usa un plugin TEVIX: una página HTML tuya que corre oculta dentro de la app y conversa con ella. La app le pide el contenido al plugin, el plugin responde con el mismo JSON de página que ya conoces y, cuando quieras, actualiza ítems en pantalla, abre un video, muestra un panel o reacciona a lo que hace el usuario.

1. La página del plugin

Crea un HTML (ej.: https://seusite.com/tevix/plugin.html) que cargue la biblioteca y registre un handler. La página no tiene interfaz: solo responde a la app.

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<script src="https://tevix.app/js/tevix-plugin.js"></script>
</head><body><script>
TevixPlugin.setupHandler({
  init: function (info) {
    // info.app {name,color,logo}, info.code, info.lang ("pt"|"en"|"es"), info.device.id, info.tevix
  },
  ready: function () {
    // conexión lista: aquí puedes iniciar timers (ej.: actualizar ítems cada segundo)
  },
  handleRequest: function (id, data, reply) {
    // la app pide un contenido. "init" es la solicitud predeterminada cuando se abre la página del plugin.
    if (id === "init") reply({
      headline: "Al aire",
      pages: [{ items: [
        { id: "agora", layout: "0,0,8,2", titleHeader: "Ahora", title: "Noticiero de la Mañana", progress: 0.4, action: "video:plugin:aovivo" },
        { layout: "8,0,4,2", type: "button", icon: "list", label: "Programación", action: "content:plugin:grade" }
      ]}]
    });
    else if (id === "aovivo") reply({ url: "https://cdn.seusite.com/live.m3u8", title: "En vivo" });
    else if (id === "grade") reply({ headline: "Programación", pages: [ /* ... */ ] });
    else reply({ error: "solicitud desconocida: " + id });
  },
  handleData: function (data) {
    // viene de una acción "plugin:commit:ALGUNA-COSA" (string)
  },
  handleEvent: function (name, data) {
    // "player:play", "player:time" {position,duration}, "player:ended", "player:closed", "content:shown", "focus" {id}, "back", "visibility"
  }
});
</script></body></html>

reply() acepta un JSON de página (pages/template+items o blocks), un objeto { "action": "video:..." } para solo ejecutar una acción, o { "error": "mensaje" }. También puede devolver una Promise. Si el plugin no responde en 20 segundos, la app muestra un error con un botón Reintentar.

2. Conectando el plugin a la app

En el tevix.json, un ítem del menú puede apuntar al plugin en lugar de a un archivo de página:

{
  "app": { "name": "TV Cidade", "color": "#E8452C" },
  "menu": [
    { "label": "En vivo", "icon": "live", "plugin": "https://seusite.com/tevix/plugin.html" },
    { "label": "Noticias", "icon": "news", "content": "noticias.json" }
  ]
}

Si toda la app es el plugin, usa "plugin": "URL" directamente en la raíz del tevix.json (sin menu): la app se abre sin barra lateral. Por defecto la app pide el contenido init; cámbialo con "request": "otro-id". Dentro de cualquier página, estática o proveniente del plugin, usa las acciones de la tabla de abajo. El plugin permanece cargado mientras la app esté abierta, incluso al cambiar de página; cargar un plugin de otra URL descarga el anterior.

3. Qué puede hacer el plugin en la app

Todo mediante la biblioteca TevixPlugin:

4. Eventos que envía la app

Llegan en handleEvent(nombre, datos):

5. Propiedades extra de páginas e ítems

Artículos (texto)

{
  "k": "Ciudad",
  "title": "La alcaldía anuncia una nueva línea de autobuses",
  "subtitle": "La operación comienza el lunes con 12 vehículos.",
  "date": "2 de noviembre de 2026",
  "author": "Redacción",
  "image": "https://seusite.com/img/onibus.jpg",
  "body": [
    "Primer párrafo.",
    "Segundo párrafo."
  ]
}

Cada elemento de body se convierte en un párrafo. Texto plano, sin HTML. La lectura usa letra grande, cómoda a 3 metros de la TV.

Radio fija

Con el campo player en el tevix.json, la app muestra una barra de radio siempre visible. El oyente navega por las noticias mientras escucha. Cualquier ítem con audio: también se reproduce en esa barra. Usa un stream directo (.mp3 o .aac), no una página de reproductor.

Íconos del menú

home live news video radio play movie tv music settings info link web star search list. Los nombres de íconos de Material Design (play-circle-outline, live-tv, ondemand-video…) se convierten automáticamente; los nombres desconocidos se muestran como un punto.

Ejemplo completo para copiar

La app de demostración "Portal Cidade" está publicada y puede servir de modelo. Descarga los archivos, cambia textos, imágenes y URL y publícalos en tu servidor:

• tevix.json (identidad, menú y radio)
• inicio.json (hero, carrusel y lista), noticias.json (cuadrícula), radio.json (audio y content:)
• materia/1234.json (artículo)

Para verlo en la app: abre TEVIX e ingresa 8CR-EEC.

Alojamiento y CORS

Los archivos JSON se quedan en tu servidor, en cualquier alojamiento que sirva archivos estáticos. El dispositivo los obtiene directamente desde ahí, así que hay dos requisitos obligatorios:

1. Habilitar CORS: el servidor debe responder con el encabezado Access-Control-Allow-Origin: * en los JSON (y en las imágenes, si quieres).
2. HTTPS siempre que sea posible. Los certificados gratuitos (Let's Encrypt) lo resuelven.

location ~* \.json$ {
    add_header Access-Control-Allow-Origin * always;
    add_header Cache-Control "public, max-age=300";
}

<FilesMatch "\.json$">
    Header set Access-Control-Allow-Origin "*"
    Header set Cache-Control "public, max-age=300"
</FilesMatch>

Generar los archivos automáticamente

No necesitas escribir JSON a mano. Cualquier cosa que genere un archivo de texto sirve:

• Sitio WordPress / RSS: un script (PHP, Python, Node) lee el feed RSS y escribe inicio.json y noticias.json cada 5 minutos. Título → title, resumen → desc, imagen destacada → image, enlace del artículo → genera un materia/ID.json con el texto.
• Radio: un radio.json fijo con el stream y la programación; cambia el subtitle del reproductor con el programa del momento.
• Videos: la API de YouTube o de tu CDN lista los últimos videos; usa video: con el MP4/HLS directo. Las páginas de YouTube no se reproducen dentro de la app; se necesita el archivo de medios.

Probar tu app

1. Abre TEVIX en el navegador (o en la TV) e ingresa tu código. En el área del socio está el botón Probar mi app ahora, que ya entra con el código.
2. Navega con las flechas del teclado (o del control remoto) y OK/Enter. Volver: Backspace o Esc.
3. ¿Cambiaste un JSON? Ve a Configuración → Limpiar caché y recargar dentro de la app.
4. El error "No se pudo cargar esta página" muestra la URL y el motivo (404, CORS, JSON inválido). Valida el JSON en un validador en línea antes de publicar.
5. En Configuración → Verificar código ahora la app consulta el servidor de TEVIX al instante (útil justo después de renovar el plan).

Consejos para que se vea bien en la TV

• Imágenes 16:9 y livianas (JPG de hasta 150 KB). Sin texto pequeño dentro de la imagen.
• Títulos cortos. En la TV el texto se lee a 3 metros.
• Hasta 8 ítems en el menú. Empieza por lo que el público más usa (En vivo, Inicio).
• Para transmisiones en vivo, usa HLS (.m3u8) con 2 o 3 calidades. El MP4 progresivo sirve para videos cortos.
• Si usas el tipo Sitio, asegúrate de que el sitio tenga foco visible y funcione con Tab/flechas; sin mouse, el usuario solo tiene el control remoto.

Planes, prueba y vencimiento

Para contratar o renovar, usa el contacto que aparece en el área del socio. El código es siempre el mismo: tu público no necesita ingresar nada de nuevo.

Área del socio

En /parceiro ingresas con el código y la contraseña elegida en el registro. Ahí puedes:

• Ver el estado del plan, la vigencia y cuántos dispositivos usaron la app en los últimos 7 días.
• Cambiar la URL del contenido, el nombre, el color y el logo. Los dispositivos se actualizan la próxima vez que se abre la app.
• Copiar las instrucciones listas para difundir a tu público.
• Probar la app con un clic y cambiar tu contraseña.

Preguntas frecuentes