Utiliza este Building Block para embeber contenido externo a tu Graphics Editor (por ej., videos, widgets de cuenta regresiva o mapas, entre otros).
Ten en cuenta que se creará un Overlay automáticamente si no lo añadiste al Árbol luego de añadir un elemento.
Para aprender a añadir Elementos al Árbol, haz click aquí.
¡No lo olvides!
El elemento External Content sólo acepta recursos externos transmitidos a través del protocolo HTTPS.
¿Cómo funciona?
El External Content renderiza una página o contenido embebible a partir de una URL.
Obtiene la URL que deseas embeber:
URL de posteos públicos de Instagram (soporta Live o IGTV)
Google Maps
Widgets de condiciones meteorológicas
Cuentas regresivas
Waze
Cualquier contenido con una URL.
Pega la URL en la sección Embedded Content del Inspector.
En el Lienzo verás renderizado el contenido externo que acabas de añadir. Ahora podrás utilizarlo como un elemento más dentro de tu Paquete Gráfico.
Ten en cuenta que, si bien el Productor puede controlar cuándo hacer visible el elemento mediante Overlays, no existe una manera para controlar/operar el contenido embebido en sí mismo desde el control remoto dado que está proviniendo de otro sitio.
La única manera de interactuar con el contenido dentro del elemento embebido es haciendo clic directamente en la ventana de salida.
Propiedades
Embedded Content
Embedded Content
Utiliza este campo para añadir la URL externa cuyo contenido se mostrará en tu Gráfica. Este campo es vinculable lo que significa que puedes modificar su contenido dinámicamente si utilizas un Data Provider que provee una URL.
Position and Size
Position and Size
Position: Cambia la posición del elemento External Content dentro del Canvas en base a los ejes X e Y (en un porcentaje relativo a la resolución de pantalla configurada).
Tamaño: Cambia el tamaño del elemento dentro del Canvas en base a su ancho y alto (en un porcentaje relativo a la resolución de pantalla configurada).
Appearance
Appearance
Opacity: Utilízala para modificar el porcentaje de transparencia del External Content.
Borders
Borders
Style: define los costados y el estilo de los bordes.
Width: define el ancho de los bordes.
Color: define el color del borde.
Radius: a mayor radio, más redondeadas serán las esquinas del rectángulo.
Aprende a modificar estas propiedades específicas de los bordes haciendo clic aquí.
Ejemplos de casos de uso típicos
Condiciones meteorológicas
1. Selecciona el elemento External Content.
2. Obtén el elemento y pégalo en el campo URL dentro del Inspector.
Cómo construir el ejemplo
En el ejemplo anterior:
Utilizamos el widget de condiciones meteorológicas del sitio web MetService https://www.metservice.com/
Hay una variedad de disposiciones, tamaños y colores para elegir.
El widget muestra el pronóstico del tiempo para diferentes ciudades de Nueva Zelanda.
Copiamos el código para embeber y lo insertamos en la Gráfica como External Content.
Luego simplemente duplicamos el elemento copiando y pegándolo y modificamos la URL.
Adicionalmente, obtuvimos la URL para embeber de Google Maps (https://www.google.com/maps) para mostrar el mapa en pantalla completa.
Mapa de tránsito en tiempo real
1. Selecciona el elemento External Content.
2. Obtén el elemento y pégalo en el campo URL dentro del Inspector.
Cómo construir el ejemplo
En este ejemplo:
Estamos mostrando el tráfico en tiempo real provisto por Waze.
Accede a https://www.waze.com/en/livemap
Elige una ubicación.
Obtén la información de ubicación interactiva embebible para añadirla como External Content en una Gráfica.
Estadísticas
1. Selecciona el elemento External Content.
2. Obtén el elemento y pégalo en el campo URL dentro del Inspector.
Cómo construir el ejemplo
En el ejemplo anterior:
Estamos mostrando estadísticas sobre tasas de inflación en pantalla completa.
Para este ejemplo, construimos una tabla mediante https://flourish.studio/
Transforma rápidamente tus hojas de cálculo en tablas, mapas e historias interactivas en línea.
Obtén la URL para embeber a fin de añadir la tabla como External Content en una Gráfica.
Cuentas regresivas
1. Selecciona el elemento External Content.
2. Obtén el elemento y pégalo en el campo URL dentro del Inspector.
Cómo construir el ejemplo
En el ejemplo anterior:
Estamos mostrando un contador de cuenta regresiva que puede ayudarte a mostrar el tiempo restante antes de un evento especial, como, por ejemplo, un streaming en vivo.
La cuenta regresiva que utilizamos para este ejemplo es un archivo transparente que creamos mediante https://www.timeanddate.com/
Una vez que hayas configurado y personalizado tu propia cuenta regresiva, obtén la URL para embeber a fin de añadirla como External Content en una Gráfica.