{"id":1256,"date":"2025-12-17T20:08:01","date_gmt":"2025-12-17T17:08:01","guid":{"rendered":"http:\/\/api-sport.pro\/?p=1256"},"modified":"2025-12-17T20:08:01","modified_gmt":"2025-12-17T17:08:01","slug":"como-crear-una-linea-de-tiempo-interactiva-en-vivo-de-goles-strikes-tarjetas","status":"publish","type":"post","link":"https:\/\/api-sport.pro\/es\/como-crear-una-linea-de-tiempo-interactiva-en-vivo-de-goles-strikes-tarjetas\/","title":{"rendered":"C\u00f3mo crear una l\u00ednea de tiempo interactiva en vivo: goles, faltas, tarjetas"},"content":{"rendered":"<div class=\"table-of-contents\">\n<div class=\"table-of-contents-title\">Contenidos<\/div>\n<ul class=\"table-of-contents-ul\">\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-1\">\u00bfQu\u00e9 es una l\u00ednea de tiempo en vivo de un partido de f\u00fatbol y por qu\u00e9 se necesita?<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-2\">C\u00f3mo elegir una API de eventos deportivos para una l\u00ednea de tiempo en vivo: criterios y precios.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-3\">Qu\u00e9 datos sobre goles, tiros y tarjetas se pueden obtener a trav\u00e9s de una API de f\u00fatbol.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-4\">Gu\u00eda paso a paso: c\u00f3mo crear una l\u00ednea de tiempo en vivo interactiva en un sitio web utilizando una API.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-5\">C\u00f3mo configurar actualizaciones en tiempo real para una l\u00ednea de tiempo en vivo: webhooks, WebSocket y polling.<\/a><\/li>\n<li class=\"table-of-contents-li\"><a class=\"table-of-contents-a\" href=\"#contents-6\">C\u00f3mo visualizar goles, tiros y tarjetas en una l\u00ednea de tiempo en vivo: consejos de UX y ejemplos de implementaci\u00f3n.<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-1\">\u00bfQu\u00e9 es una l\u00ednea de tiempo en vivo de un partido de f\u00fatbol y por qu\u00e9 se necesita?<\/h2>\n<p>Una l\u00ednea de tiempo en vivo de un partido es un feed de eventos interactivo que muestra en tiempo real lo que est\u00e1 sucediendo en el campo: goles, tiros peligrosos, tarjetas amarillas y rojas, sustituciones, tiempo a\u00f1adido. A diferencia de un simple contador de goles o un comentario en texto, la l\u00ednea de tiempo proporciona una cronolog\u00eda visual del partido, donde cada evento est\u00e1 vinculado a un minuto y contexto. El usuario puede entender la din\u00e1mica del partido de un vistazo: cu\u00e1ndo comenz\u00f3 la presi\u00f3n, durante qu\u00e9 segmento se emitieron tarjetas, cu\u00e1n r\u00e1pido empatiz\u00f3 el equipo despu\u00e9s de conceder un gol.<\/p>\n<p>Para sitios de medios, servicios de apuestas, plataformas anal\u00edticas y aplicaciones de aficionados, tal l\u00ednea de tiempo en vivo se convierte en un elemento clave para retener a la audiencia. El usuario no ve solo un marcador de 2:1, sino una historia viva del juego: qui\u00e9n anot\u00f3, si fue de un penal o de juego abierto, qu\u00e9 equipo domin\u00f3 en tiros, despu\u00e9s de qu\u00e9 momento cambi\u00f3 el curso del partido. Al utilizar datos de <a href=\"http:\/\/api-sport.pro\/es\/\">por el API de eventos deportivos api-sport.ru<\/a>, tal l\u00ednea de tiempo se puede construir autom\u00e1ticamente, sin entrada manual, con actualizaciones cada minuto o incluso m\u00e1s frecuentemente.<\/p>\n<p>Una l\u00ednea de tiempo en vivo moderna se puede ampliar f\u00e1cilmente con capas adicionales de informaci\u00f3n: sugerencias emergentes con detalles del episodio, avances de jugadores, enlaces a res\u00famenes en video, cuotas de apuestas est\u00e1ticas y en vivo. Con una integraci\u00f3n adecuada a trav\u00e9s de una API deportiva, la l\u00ednea de tiempo se convierte en un centro de partido completo, alrededor del cual se construyen secciones para estad\u00edsticas, apuestas, chat de aficionados y recomendaciones personalizadas. Por eso, el trabajo avanzado con eventos de partidos a trav\u00e9s de una API se convierte en una ventaja competitiva para cualquier proyecto deportivo.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-2\">C\u00f3mo elegir una API de eventos deportivos para una l\u00ednea de tiempo en vivo: criterios y precios.<\/h2>\n<p>Para que la l\u00ednea de tiempo en vivo interactiva funcione de manera estable y refleje con precisi\u00f3n el curso del partido, la elecci\u00f3n correcta del proveedor de datos es cr\u00edtica. En primer lugar, se considera la profundidad y estructura de los eventos: la API debe devolver no solo goles y el marcador final, sino tambi\u00e9n eventos en vivo detallados con el minuto, tipo (gol, tarjeta, sustituci\u00f3n, etc.), equipo, jugador y resultado actual. La presencia del par\u00e1metro del minuto actual del partido (por ejemplo, <code>minutoDelPartidoActual<\/code>) y el estado de la reuni\u00f3n (<code>no comenzado<\/code>, <code>en progreso<\/code>, <code>completado<\/code>) es importante para mantener correctamente la l\u00ednea de tiempo y detener las actualizaciones al final del juego.<\/p>\n<p>El segundo bloque de criterios es la fiabilidad y la econom\u00eda. Para proyectos en vivo, la latencia m\u00ednima de actualizaci\u00f3n, la alta disponibilidad de la API y una pol\u00edtica de l\u00edmites clara son importantes: cu\u00e1ntas solicitudes por minuto\/d\u00eda se pueden hacer sin el riesgo de bloqueo, c\u00f3mo est\u00e1n estructuradas las tarifas, si hay planes especiales para apuestas en vivo y medios. El servicio <a href=\"http:\/\/api-sport.pro\/es\/\">api-sport.pro<\/a> tiene una cuadr\u00edcula de precios dise\u00f1ada tanto para startups como para grandes plataformas, y el costo es predecible: pagas por el acceso a deportes y el volumen de solicitudes, sin recargos ocultos por el modo en vivo.<\/p>\n<p>El tercer aspecto es la pila tecnol\u00f3gica: la presencia de documentaci\u00f3n OpenAPI bien documentada, puntos finales uniformes para diferentes deportes, campos para cuotas de casas de apuestas (<code>oddsBase<\/code>), soporte para estad\u00edsticas avanzadas de partidos (<code>estad\u00edsticasDelPartido<\/code>) y canales en tiempo real planificados (WebSocket, sugerencias de IA). A continuaci\u00f3n se muestra un ejemplo de una solicitud simple para obtener todos los partidos de f\u00fatbol en vivo actuales utilizando la API de Eventos Deportivos:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nfetch(&quot;https:\/\/api.api-sport.ru\/v2\/football\/matches?status=inprogress&quot;, {\n  headers: {\n    Authorization: &quot;YOUR_API_KEY&quot; \/\/ \u043a\u043b\u044e\u0447 \u0438\u0437 \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430 api-sport.ru\n  }\n})\n  .then(response =&gt; response.json())\n  .then(data =&gt; {\n    console.log(&quot;\u0412\u0441\u0435\u0433\u043e \u043c\u0430\u0442\u0447\u0435\u0439 \u0432 \u043b\u0430\u0439\u0432\u0435:&quot;, data.totalMatches);\n    \/\/ \u0414\u0430\u043b\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u0430\u0442\u0447\u0435\u0439 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430\n  })\n  .catch(console.error);\n<\/pre>\n<p>Este punto final b\u00e1sico se convierte en el punto de partida: muestras una lista de juegos en vivo, el usuario selecciona el partido deseado y luego tu frontend comienza a trabajar con los eventos detallados de esa reuni\u00f3n espec\u00edfica.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-3\">Qu\u00e9 datos sobre goles, tiros y tarjetas se pueden obtener a trav\u00e9s de una API de f\u00fatbol.<\/h2>\n<p>La API de Eventos Deportivos basada en el punto final de f\u00fatbol proporciona un conjunto de datos detallado necesario para construir una rica l\u00ednea de tiempo en vivo. Para un partido espec\u00edfico, recibes un objeto. <code>partido<\/code>, que tiene par\u00e1metros de estado, minuto actual (<code>minutoDelPartidoActual<\/code>), puntuaci\u00f3n por tiempo y tiempo total (<code>puntajeLocal<\/code>, <code>puntajeVisitante<\/code>), as\u00ed como un array <code>eventosEnVivo<\/code>. En cada elemento <code>EventoEnVivo<\/code> se especifica el minuto del evento (<code>tiempo<\/code>), tipo (<code>tipo<\/code>: <code>gol<\/code>, <code>tarjeta<\/code>, <code>sustituci\u00f3n<\/code>, <code>varDecisi\u00f3n<\/code>, <code>per\u00edodo<\/code> y otros), equipo (<code>equipo<\/code>: <code>local<\/code> or <code>visitante<\/code>), jugador, raz\u00f3n (<code>raz\u00f3n<\/code>) y puntuaci\u00f3n despu\u00e9s del evento (<code>puntajeLocal<\/code>, <code>puntajeVisitante<\/code>).<\/p>\n<p>Gracias a esto, puedes distinguir entre un gol de penalti y un gol en juego (campo <code>de<\/code>), construir marcadores separados para tarjetas amarillas y rojas, mostrar etiquetas con los nombres de los goleadores y los infractores, resaltar episodios de VAR y per\u00edodos (inicio\/fin de mitades, tiempo a\u00f1adido). Al mismo tiempo, el array <code>estad\u00edsticasDelPartido<\/code> proporciona estad\u00edsticas agregadas sobre tiros (<code>totalDisparosALaPorter\u00eda<\/code>, <code>disparosALaPorter\u00eda<\/code>, <code>tirosFueraDeLaPorter\u00eda<\/code>, <code>totalDisparosDentroDel\u00c1rea<\/code>, <code>totalTirosFueraDel\u00c1rea<\/code>), posesi\u00f3n del bal\u00f3n (<code>posesi\u00f3nDelBal\u00f3n<\/code>), tarjetas (<code>tarjetas amarillas<\/code>), faltas, c\u00f3rners y una multitud de otras m\u00e9tricas, agrupadas por per\u00edodo del partido.<\/p>\n<p>Para obtener todos los eventos del partido ordenados por tiempo, es conveniente utilizar un endpoint especializado <code>\/matches\/{matchId}\/events<\/code>. A continuaci\u00f3n se muestra un ejemplo de solicitud y un fragmento de la respuesta, que luego se puede convertir directamente en puntos en la l\u00ednea de tiempo:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nfetch(&quot;https:\/\/api.api-sport.ru\/v2\/football\/matches\/14570728\/events&quot;, {\n  headers: {\n    Authorization: &quot;YOUR_API_KEY&quot;\n  }\n})\n  .then(r =&gt; r.json())\n  .then(data =&gt; {\n    data.events.forEach(event =&gt; {\n      console.log(event.time, event.type, event.reason, event.homeScore + &quot;:&quot; + event.awayScore);\n    });\n  });\n<\/pre>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\" data-no-translation=\"\">\n{\n  &quot;matchId&quot;: 14570728,\n  &quot;totalEvents&quot;: 23,\n  &quot;events&quot;: &#x5B;\n    { &quot;time&quot;: 12, &quot;type&quot;: &quot;goal&quot;, &quot;team&quot;: &quot;home&quot;, &quot;player&quot;: {&quot;name&quot;: &quot;Player A&quot;}, &quot;homeScore&quot;: 1, &quot;awayScore&quot;: 0 },\n    { &quot;time&quot;: 35, &quot;type&quot;: &quot;card&quot;, &quot;class&quot;: &quot;yellow&quot;, &quot;team&quot;: &quot;away&quot;, &quot;player&quot;: {&quot;name&quot;: &quot;Player B&quot;}, &quot;reason&quot;: &quot;Foul&quot; }\n    \/\/ ... \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\n  ]\n}\n<\/pre>\n<p>Con tal estructura, puedes agrupar eventos por tipos, contar la intensidad de los tiros en segmentos de tiempo espec\u00edficos y tambi\u00e9n construir gr\u00e1ficos y widgets adicionales sobre la l\u00ednea de tiempo para an\u00e1lisis avanzados.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-4\">Gu\u00eda paso a paso: c\u00f3mo crear una l\u00ednea de tiempo en vivo interactiva en un sitio web utilizando una API.<\/h2>\n<p>Crear una l\u00ednea de tiempo en vivo completa comienza con la conexi\u00f3n a una API confiable de eventos deportivos. Primero, te registras y obtienes una clave de acceso en <a href=\"https:\/\/app.api-sport.ru\">la cuenta personal.<\/a>. Luego seleccionas el deporte (por ejemplo, f\u00fatbol) y encuentras el partido deseado a trav\u00e9s del endpoint <code>\/v2\/f\u00fatbol\/partidos<\/code> con filtros por estado, fecha, torneo o equipo. Despu\u00e9s de seleccionar el partido por su <code>idPartido<\/code> solicitas eventos detallados a trav\u00e9s de <code>\/v2\/f\u00fatbol\/partidos\/{matchId}\/eventos<\/code> o utilizas un array <code>eventosEnVivo<\/code> de <code>\/matches\/{matchId}<\/code>, para inicializar el estado inicial de la l\u00ednea de tiempo.<\/p>\n<p>El siguiente paso es preparar los datos para el frontend. Los eventos se ordenan por el campo <code>tiempo<\/code> (si el servidor no lo ha hecho), se estandarizan a un formato com\u00fan y se enriquecen con informaci\u00f3n adicional: nombre del equipo, color para tarjetas, tipo de \u00edcono para goles, penales o autogoles. Al mismo tiempo, calculas la duraci\u00f3n m\u00e1xima del partido (90 minutos m\u00e1s el tiempo de descuento posible y tiempo extra en partidos de copa) para establecer la escala de la l\u00ednea de tiempo. En esta etapa, es conveniente almacenar eventos en un array donde cada elemento contiene el minuto, tipo, etiqueta y campos de metadatos para renderizar.<\/p>\n<p>El paso final es renderizar el componente interactivo. En el frontend, creas una l\u00ednea horizontal (por ejemplo, en HTML\/CSS o usando SVG\/Canvas), donde el eje X representa los minutos del partido, y los marcadores de eventos se calculan como un porcentaje de la longitud total de la escala. Al hacer clic en un marcador, se muestra una tarjeta con informaci\u00f3n detallada: goleador, asistente, tipo de tarjeta, marcador actual, enlace al resumen desde el campo. <code>momentosDestacados<\/code>. A continuaci\u00f3n se muestra un ejemplo de l\u00f3gica m\u00ednima en JavaScript que transforma la respuesta de la API en puntos convenientes para la visualizaci\u00f3n:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nasync function buildTimeline(matchId) {\n  const res = await fetch(`https:\/\/api.api-sport.ru\/v2\/football\/matches\/${matchId}\/events`, {\n    headers: { Authorization: &quot;YOUR_API_KEY&quot; }\n  });\n  const data = await res.json();\n  const duration = 95; \/\/ \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u044f\u0442\u044c \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c \u0442\u0438\u043f\u0430 injuryTime\n  const points = data.events.map(event =&gt; ({\n    minute: event.time,\n    position: (event.time \/ duration) * 100,\n    type: event.type,\n    team: event.team,\n    label: event.reason || event.type,\n    score: `${event.homeScore}:${event.awayScore}`\n  }));\n  \/\/ \u0414\u0430\u043b\u0435\u0435 points \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0448\u043a\u0430\u043b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438\n  return points;\n}\n<\/pre>\n<p>Despu\u00e9s de la configuraci\u00f3n inicial, agregas un mecanismo de actualizaci\u00f3n (polling o WebSocket) y enriqueces gradualmente el componente: resaltando la fase activa del partido, filtros por tipos de eventos y dise\u00f1o adaptativo para dispositivos m\u00f3viles. <a href=\"http:\/\/api-sport.pro\/es\/\">api-sport.pro<\/a> La estructura de datos est\u00e1 unificada para diferentes deportes, por lo que puedes replicar f\u00e1cilmente este escenario para baloncesto, hockey o esports.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-5\">C\u00f3mo configurar actualizaciones en tiempo real para una l\u00ednea de tiempo en vivo: webhooks, WebSocket y polling.<\/h2>\n<p>Una l\u00ednea de tiempo interactiva en vivo revela su potencial solo con actualizaciones de datos oportunas. El enfoque b\u00e1sico y m\u00e1s universal es la consulta peri\u00f3dica de la API. Su servidor o frontend hace una solicitud al endpoint a intervalos determinados (por ejemplo, cada 15-30 segundos), <code>\/v2\/f\u00fatbol\/partidos\/{matchId}<\/code> or <code>\/matches\/{matchId}\/events<\/code>, compara nuevos eventos con los ya guardados y a\u00f1ade a la l\u00ednea de tiempo solo lo que ha aparecido desde la \u00faltima actualizaci\u00f3n. Este m\u00e9todo est\u00e1 completamente controlado por usted y no requiere infraestructura separada.<\/p>\n<p>La segunda opci\u00f3n popular es usar webhooks, donde su backend recibe notificaciones HTTP de un servicio intermediario para cada nuevo evento de partido. La API de Eventos Deportivos opera en un modelo de solicitud-respuesta, pero puede construir su propia capa encima: un peque\u00f1o servicio consulta regularmente, <code>2. api.api-sport.ru<\/code>, y cuando aparecen nuevos eventos, env\u00eda webhooks a sus aplicaciones. Esto reduce la carga en el frontend y permite un procesamiento centralizado de actualizaciones, almacenamiento en cach\u00e9 de respuestas y sincronizaci\u00f3n de m\u00faltiples consumidores de datos.<\/p>\n<p>El tercer m\u00e9todo, el m\u00e1s operativo, es una conexi\u00f3n WebSocket. En pr\u00f3ximas actualizaciones, api-sport.ru planea agregar un canal WebSocket nativo, donde los eventos de partidos se transmitir\u00e1n sin solicitudes HTTP constantes. Mientras esta funcionalidad est\u00e1 en desarrollo, tiene sentido combinar la consulta con una degradaci\u00f3n inteligente: aumentar el intervalo de consulta durante las pausas y disminuirlo durante fases clave (inicio del partido, \u00faltimos minutos, penales). Un ejemplo de la implementaci\u00f3n m\u00e1s simple de consulta en JavaScript:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\" data-no-translation=\"\">\nfunction startLiveUpdates(matchId) {\n  let lastTotalEvents = 0;\n  async function tick() {\n    const res = await fetch(`https:\/\/api.api-sport.ru\/v2\/football\/matches\/${matchId}\/events`, {\n      headers: { Authorization: &quot;YOUR_API_KEY&quot; }\n    });\n    const data = await res.json();\n    if (data.totalEvents &gt; lastTotalEvents) {\n      const newEvents = data.events.slice(lastTotalEvents);\n      renderNewEventsOnTimeline(newEvents); \/\/ \u0432\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438\n      lastTotalEvents = data.totalEvents;\n    }\n    \/\/ \u043f\u0440\u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u043c\u0430\u0442\u0447\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u043f\u0440\u043e\u0441 \u043f\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0443 \u043c\u0430\u0442\u0447\u0430\n    setTimeout(tick, 20000); \/\/ \u043e\u043f\u0440\u043e\u0441 \u043a\u0430\u0436\u0434\u044b\u0435 20 \u0441\u0435\u043a\u0443\u043d\u0434\n  }\n  tick();\n}\n<\/pre>\n<p>Esta estructura es f\u00e1cilmente extensible: puede agregar control del estado del partido, cambiar din\u00e1micamente la frecuencia de solicitudes, registrar retrasos y construir su propia anal\u00edtica sobre la velocidad de actualizaci\u00f3n. Al cambiar a un canal WebSocket, la l\u00f3gica de la l\u00ednea de tiempo seguir\u00e1 siendo la misma; solo cambiar\u00e1 el m\u00e9todo de entrega de eventos.<\/p>\n<\/div>\n<div class=\"universal_article\">\n<h2 id=\"contents-6\">C\u00f3mo visualizar goles, tiros y tarjetas en una l\u00ednea de tiempo en vivo: consejos de UX y ejemplos de implementaci\u00f3n.<\/h2>\n<p>Una l\u00ednea de tiempo en vivo exitosa no solo se trata de datos precisos, sino tambi\u00e9n de una visualizaci\u00f3n reflexiva. El usuario debe poder distinguir goles, tiros peligrosos y tarjetas de un vistazo, entender qu\u00e9 equipo atac\u00f3 y cu\u00e1ndo cambi\u00f3 el juego. Para esto, se utiliza una codificaci\u00f3n de colores clara (verde - gol, amarillo - tarjeta amarilla, rojo - tarjeta roja, azul - tiro), diferentes formas de marcadores y colocaci\u00f3n sim\u00e9trica de eventos verticalmente en relaci\u00f3n con la l\u00ednea central para equipos locales y visitantes. Los tooltips al pasar el mouse o hacer clic revelan detalles: autor, asistente, tipo de violaci\u00f3n, puntaje actual.<\/p>\n<p>1. La adaptaci\u00f3n para diferentes dispositivos es importante. En escritorio, es conveniente mostrar la l\u00ednea de tiempo completa del partido con marcas por minutos, mitades y tiempo extra, mientras que en dispositivos m\u00f3viles \u2013 hacer un desplazamiento horizontal con marcadores ampliados y breves descripciones. Con un gran n\u00famero de eventos (por ejemplo, en un partido con abundancia de tiros), es \u00fatil agregar filtros: el usuario puede dejar solo goles y tarjetas o solo momentos de su equipo en la l\u00ednea de tiempo. Una buena pr\u00e1ctica es vincular la l\u00ednea de tiempo con un bloque de estad\u00edsticas generales y res\u00famenes de video: hacer clic en un marcador abre inmediatamente el resumen disponible a trav\u00e9s de la respuesta de la API. <code>momentosDestacados<\/code> 2. A continuaci\u00f3n se muestra un ejemplo simplificado de la estructura HTML y las clases CSS para la l\u00ednea de tiempo, que luego se puede llenar din\u00e1micamente con datos de la API de Eventos Deportivos:.<\/p>\n<p>3. A continuaci\u00f3n, su l\u00f3gica de JavaScript sustituye la posici\u00f3n<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\" data-no-translation=\"\">\n&lt;div class=&quot;match-timeline&quot;&gt;\n  &lt;div class=&quot;timeline-line&quot;&gt;&lt;\/div&gt;\n  &lt;!-- \u041c\u0430\u0440\u043a\u0435\u0440\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 --&gt;\n  &lt;div class=&quot;timeline-event goal home&quot; style=&quot;left: 23%&quot; data-minute=&quot;23&quot;&gt;\n    &lt;span class=&quot;icon&quot;&gt;\u26bd&lt;\/span&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;timeline-event yellow-card away&quot; style=&quot;left: 57%&quot; data-minute=&quot;57&quot;&gt;\n    &lt;span class=&quot;icon&quot;&gt;\ud83d\udfe8&lt;\/span&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>4. izquierda <code>5. en porcentajes dependiendo del minuto del evento, adjunta controladores de clic, y vincula cada marcador con el objeto de evento de la API. Este enfoque se escala f\u00e1cilmente a otros deportes soportados por api-sport.ru: hockey, baloncesto, tenis, tenis de mesa y deportes electr\u00f3nicos, solo cambiando el conjunto de \u00edconos y la l\u00ednea de tiempo (per\u00edodos, cuartos, sets). Como resultado, la l\u00ednea de tiempo en vivo se convierte en un componente universal y reconocible para el usuario que proporciona una imagen completa del partido en solo unos segundos.<\/code> 6. Parser de proveedor de citas: c\u00f3mo obtener datos de las casas de apuestas.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Content What is a live timeline of a football match and why is it needed How to choose a sports events API for a live timeline: criteria and prices What data on goals, shots, and cards can be obtained through a football API Step-by-step guide: how to create an interactive live timeline on a website using an API How to set up real-time updates for a live timeline: webhooks, [\u2026]<\/p>","protected":false},"author":1,"featured_media":1255,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","faq":"[{\"question\":\"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 live timeline \u0444\u0443\u0442\u0431\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0447\u0430?\",\"answer\":\"Live timeline \u0444\u0443\u0442\u0431\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0447\u0430 \u2014 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0448\u043a\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u0445\u0440\u043e\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u0433\u0440\u044b: \u0433\u043e\u043b\u044b, \u0443\u0434\u0430\u0440\u044b, \u0436\u0451\u043b\u0442\u044b\u0435 \u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0437\u0430\u043c\u0435\u043d\u044b, VAR\u2011\u044d\u043f\u0438\u0437\u043e\u0434\u044b \u0438 \u043f\u0435\u0440\u0438\u043e\u0434\u044b. \u0422\u0430\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 \u0432\u0441\u0442\u0440\u0435\u0447\u0438 \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b.\"},{\"question\":\"\u041a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043e\u0442 API, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c live timeline?\",\"answer\":\"\u0414\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f live timeline \u043e\u0442 API \u043d\u0443\u0436\u043d\u044b, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u0430\u0442\u0447\u0430 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u043c\u0438\u043d\u0443\u0442\u044b, \u0442\u0438\u043f\u0430 (goal, card, substitution \u0438 \u0434\u0440.), \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u0441\u0447\u0451\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043c\u0438\u043d\u0443\u0442\u0430 \u043c\u0430\u0442\u0447\u0430, \u0441\u0442\u0430\u0442\u0443\u0441 \u0432\u0441\u0442\u0440\u0435\u0447\u0438 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0443\u0434\u0430\u0440\u043e\u0432, \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0438 \u0432\u043b\u0430\u0434\u0435\u043d\u0438\u044f \u043c\u044f\u0447\u043e\u043c. \u0412\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Sport Events API \u043d\u0430 api-sport.ru.\"},{\"question\":\"\u041a\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Sport Events API?\",\"answer\":\"\u0427\u0430\u0441\u0442\u043e\u0442\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f. \u0414\u043b\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0440\u043e\u0441\u0430 API \u0440\u0430\u0437 \u0432 20\u201330 \u0441\u0435\u043a\u0443\u043d\u0434. \u0414\u043b\u044f \u0431\u0435\u0442\u0442\u0438\u043d\u0433\u043e\u0432\u044b\u0445 \u0438 \u0442\u0440\u0435\u0439\u0434\u0438\u043d\u0433\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u043e 5\u201315 \u0441\u0435\u043a\u0443\u043d\u0434. \u0412\u0430\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u043c\u043d\u044b\u0439 polling: \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u0432 \u043f\u0435\u0440\u0435\u0440\u044b\u0432\u0430\u0445 \u0438 \u043f\u043e\u0432\u044b\u0448\u0430\u0442\u044c \u0432 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043c\u0430\u0442\u0447\u0430.\"},{\"question\":\"\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0441\u043f\u043e\u0440\u0442\u0430?\",\"answer\":\"\u0414\u0430. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 Sport Events API \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0441\u043f\u043e\u0440\u0442\u0430 (\u0444\u0443\u0442\u0431\u043e\u043b, \u0445\u043e\u043a\u043a\u0435\u0439, \u0431\u0430\u0441\u043a\u0435\u0442\u0431\u043e\u043b, \u043a\u0438\u0431\u0435\u0440\u0441\u043f\u043e\u0440\u0442 \u0438 \u0434\u0440.), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u0435\u0436\u043d\u0435\u0439. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043b\u0438\u0448\u044c \u0441\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0448\u043a\u0430\u043b\u0443 (\u0442\u0430\u0439\u043c\u044b, \u043f\u0435\u0440\u0438\u043e\u0434\u044b, \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u0438, \u0441\u0435\u0442\u044b) \u0438 \u043d\u0430\u0431\u043e\u0440 \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u0442\u0438\u043f\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.\"},{\"question\":\"\u0413\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c API\u2011\u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 live timeline \u043d\u0430 api-sport.ru?\",\"answer\":\"API\u2011\u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a Sport Events API \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432 \u043b\u0438\u0447\u043d\u043e\u043c \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 app.api-sport.ru. \u0421 \u043a\u043b\u044e\u0447\u043e\u043c \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u0443\u0436\u043d\u044b\u043c \u0432\u0438\u0434\u0430\u043c \u0441\u043f\u043e\u0440\u0442\u0430, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0430\u0440\u0438\u0444 \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 live\u2011\u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u044b \u043d\u0430 \u0441\u0432\u043e\u0451\u043c \u0441\u0430\u0439\u0442\u0435 \u0438\u043b\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.\"}]","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_head":"<title>Live match timeline via sports events API \u2014 api-sport.ru<\/title>\n<meta name=\"description\" content=\"Interactive live timeline of goals, strikes, and cards based on Sport Events API data. For websites, betting, and media. Learn how to implement a match timeline.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/api-sport.pro\/es\/como-crear-una-linea-de-tiempo-interactiva-en-vivo-de-goles-strikes-tarjetas\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Live match timeline via sports events API \u2014 api-sport.ru\" \/>\n<meta property=\"og:description\" content=\"Interactive live timeline of goals, strikes, and cards based on Sport Events API data. For websites, betting, and media. Learn how to implement a match timeline.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/api-sport.pro\/es\/como-crear-una-linea-de-tiempo-interactiva-en-vivo-de-goles-strikes-tarjetas\/\" \/>\n<meta property=\"og:site_name\" content=\"Sports Events API\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-17T17:08:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1376\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/\",\"url\":\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/\",\"name\":\"Live match timeline via sports events API \u2014 api-sport.ru\",\"isPartOf\":{\"@id\":\"https:\/\/api-sport.pro\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg\",\"datePublished\":\"2025-12-17T17:08:01+00:00\",\"author\":{\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601\"},\"description\":\"Interactive live timeline of goals, strikes, and cards based on Sport Events API data. For websites, betting, and media. Learn how to implement a match timeline.\",\"breadcrumb\":{\"@id\":\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#primaryimage\",\"url\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg\",\"contentUrl\":\"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg\",\"width\":1376,\"height\":768,\"caption\":\"\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 live-timeline: \u0433\u043e\u043b\u044b, \u0443\u0434\u0430\u0440\u044b, \u043a\u0430\u0440\u0442\u044b\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/api-sport.pro\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create an interactive live-timeline: goals, strikes, cards\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/api-sport.pro\/#website\",\"url\":\"https:\/\/api-sport.pro\/\",\"name\":\"Sports Events API\",\"description\":\"Sports Events API\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/api-sport.pro\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/api-sport.pro\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/api-sport.pro\"],\"url\":\"https:\/\/api-sport.pro\/es\/author\/admin\/\"}]}<\/script>","yoast_head_json":{"title":"L\u00ednea de tiempo de partidos en vivo a trav\u00e9s de la API de eventos deportivos \u2014 api-sport.ru","description":"L\u00ednea de tiempo interactiva en vivo de goles, strikes y tarjetas basada en los datos de la API de Eventos Deportivos. Para sitios web, apuestas y medios. Aprende c\u00f3mo implementar una l\u00ednea de tiempo de partidos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/api-sport.pro\/es\/como-crear-una-linea-de-tiempo-interactiva-en-vivo-de-goles-strikes-tarjetas\/","og_locale":"es_ES","og_type":"article","og_title":"Live match timeline via sports events API \u2014 api-sport.ru","og_description":"Interactive live timeline of goals, strikes, and cards based on Sport Events API data. For websites, betting, and media. Learn how to implement a match timeline.","og_url":"https:\/\/api-sport.pro\/es\/como-crear-una-linea-de-tiempo-interactiva-en-vivo-de-goles-strikes-tarjetas\/","og_site_name":"Sports Events API","article_published_time":"2025-12-17T17:08:01+00:00","og_image":[{"width":1376,"height":768,"url":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/","url":"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/","name":"L\u00ednea de tiempo de partidos en vivo a trav\u00e9s de la API de eventos deportivos \u2014 api-sport.ru","isPartOf":{"@id":"https:\/\/api-sport.pro\/#website"},"primaryImageOfPage":{"@id":"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#primaryimage"},"image":{"@id":"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#primaryimage"},"thumbnailUrl":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg","datePublished":"2025-12-17T17:08:01+00:00","author":{"@id":"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601"},"description":"L\u00ednea de tiempo interactiva en vivo de goles, strikes y tarjetas basada en los datos de la API de Eventos Deportivos. Para sitios web, apuestas y medios. Aprende c\u00f3mo implementar una l\u00ednea de tiempo de partidos.","breadcrumb":{"@id":"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#primaryimage","url":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg","contentUrl":"https:\/\/api-sport.pro\/wp-content\/uploads\/2025\/11\/kak-sozdat-interaktivnyi-live-timeline-goly-udary-karty_posts.jpg","width":1376,"height":768,"caption":"\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 live-timeline: \u0433\u043e\u043b\u044b, \u0443\u0434\u0430\u0440\u044b, \u043a\u0430\u0440\u0442\u044b"},{"@type":"BreadcrumbList","@id":"https:\/\/api-sport.pro\/how-to-create-an-interactive-live-timeline-goals-strikes-cards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/api-sport.pro\/"},{"@type":"ListItem","position":2,"name":"How to create an interactive live-timeline: goals, strikes, cards"}]},{"@type":"WebSite","@id":"https:\/\/api-sport.pro\/#website","url":"https:\/\/api-sport.pro\/","name":"API de Eventos Deportivos","description":"API de Eventos Deportivos","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/api-sport.pro\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/api-sport.pro\/#\/schema\/person\/bc93f449b3753a5f254264da266fb601","name":"administrador","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/api-sport.pro\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8f3dce32feb8659c1f1c917db74325481c6133714f03d5a9433ba6df23a857ab?s=96&d=mm&r=g","caption":"admin"},"sameAs":["http:\/\/api-sport.pro"],"url":"https:\/\/api-sport.pro\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/comments?post=1256"}],"version-history":[{"count":2,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1256\/revisions"}],"predecessor-version":[{"id":1471,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/posts\/1256\/revisions\/1471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/media\/1255"}],"wp:attachment":[{"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/media?parent=1256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/categories?post=1256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api-sport.pro\/es\/wp-json\/wp\/v2\/tags?post=1256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}