13 widgets que hacen una impresionante visualización de datos en tiempo real

Anuncio

Si usted es una persona ocupada que realmente no tiene mucho tiempo para revisar las noticias todos los días, pero le gusta mantenerse al día con los últimos eventos importantes como tormentas importantes, el mercado de valores o cambios importantes en todo el mundo, una pantalla gráfica es mucho más eficiente.

Probablemente haya visto ejemplos de algunas oficinas de corredores de bolsa donde hay un monitor con muchos cuadros, gráficos y otros gráficos que muestran todos los datos en tiempo real. O tal vez haya visto esas fantásticas pantallas del centro de lanzamiento de la NASA con todo tipo de datos importantes que se desplazan por la pantalla.

En mi opinión, esa es la mejor manera de mostrar mucha información en un espacio pequeño. Y si está trabajando con dos o tres pantallas como yo, entonces tiene el espacio del monitor para tener un mostrar todo el tiempo, donde puede ver lo que está sucediendo en todo el mundo con solo un vistazo.

En este artículo, voy a guiarlo a través de mis esfuerzos para armar ese tipo de pantalla utilizando herramientas y técnicas de diseño web muy simples. También voy a compartir 15 de los mejores widgets de tablero en línea que encontré en Internet que ayudaron a construir esta gran pantalla informativa de información mundial.

Creación de una visualización en tiempo real de datos mundiales

Uno de los primeros lugares a los que fui para construir una pantalla tan informativa es Netvibes. Hemos cubierto el sitio a menudo, como en el increíble artículo de Angela sobre cómo usarlo para administrar tu vida Cómo crear una fuente de noticias real con RSSCombine las salidas RSS con un par de herramientas de terceros y cree una única fuente de noticias personalizada que solo contenga historias legítimas que le interesen. Te mostramos cómo en esta guía paso a paso. Lee mas .

También me gustan las Netvibes, y después de leer el artículo de Angela, en realidad comencé a usarlo para organizar enlaces y herramientas para cada una de las principales tareas que tengo que hacer en línea. Es bueno tener todo en un solo lugar. Sin embargo, cuando intenté usar el gadget HTML para incrustar widgets en la página, noté que no funciona muy bien. Puede cambiar el tamaño del ancho, pero la altura parece permanecer fija, cortando widgets más grandes.

Después de probar algunos otros sitios: Protopage Los mejores creadores de sitios web para crear una cartera limpia en línea¿Qué creador de sitios web gratuito es mejor para su cartera? ¡Aquí están los mejores creadores de sitios web entre los que puede elegir! Lee mas fue otro que no funcionó del todo bien. Agregó demasiado espacio a los lados de los widgets y no permitió un cambio de tamaño adecuado. Entonces, después de pasar demasiado tiempo tratando de hacer que las páginas preexistentes funcionen, decidí comenzar a diseñar una página desde cero.

Quería encontrar una solución que cualquiera pudiera hacer, independientemente de la experiencia en diseño web. Mi herramienta de diseño web WYSIWYG de elección es Kompozer. El único inconveniente de este enfoque es que utiliza tablas, que en el mundo de los diseñadores web se consideran arcaicas en comparación con el uso de CSS. Pero por simplicidad, vamos a utilizar Kompozer y diseñar los widgets directamente en la página.

Así es como se ve la vista de diseño en Kompozer después de insertar una tabla: en este caso, uso una tabla de 4 por 4, pero puede hacerla del tamaño que desee.

Primero, haga clic derecho en la tabla y cambie las propiedades para que las líneas no sean de color (invisible). El primer widget que inserté en la celda superior izquierda fue un widget de reloj genial de clocklink.com. Debajo de eso, agregué un widget de clima de Accuweather.com - uno de mis favoritos porque muestra una pantalla gráfica de radar genial de cualquier tormenta que se aproxime.

En cada caso, simplemente hago clic dentro de la celda en la que quiero insertar el código del widget, luego hago clic en el menú Insertar y elijo HTML. Simplemente pegue el código del widget en la ventana que aparece.

Puede notar que su widget no está centrado, o aparece demasiado abajo de la parte superior de la celda. Eso es fácil de arreglar en Kompozer sin ningún conocimiento de codificación. Simplemente haga clic derecho en la celda, elija las propiedades de la celda de la tabla y luego cambie la alineación del contenido a lo que se vea mejor.

Para probar sus cambios, simplemente guarde el archivo en su computadora local como un archivo HTML y luego vea el archivo usando su navegador favorito. Si realmente tiene problemas, siempre puede insertar código si realmente tiene que hacerlo. En Kompozer, puede editar la página haciendo clic en la pestaña "fuente". Por ejemplo, hubo un par de casos en los que solo tuve que insertar un descanso
para forzar un espacio entre algunos de los widgets que coloqué dentro de la misma celda.

Agregando tres más de los mejores widgets que encontré, había desarrollado la pantalla informativa en tiempo real que se muestra a continuación. Los tres widgets geniales que agregué fueron el widget de precios de la gasolina de gas-cost.net, y el widget de productos y widgets de tipos de cambio actuales de 100widgets.com.

Todos estos son widgets en tiempo real, que muestran datos actuales de todo el mundo. Ahora tengo datos actualizados sobre los precios, las tasas de acciones y el clima, todo con un solo vistazo. Pero solo la mitad de la página web está llena, y tenemos mucha más información para construir en esta página, dos columnas más completas de datos para ser exactos.

Otro widget realmente genial que agregué a la página fue el widget de configuración del usuario [Ya no está disponible] de 100widgets.com. Esto le brinda comentarios sobre su dirección IP actual, información de la computadora y la versión de Windows / navegador. Esto es útil cuando está de viaje y se conecta a su página desde un hotel o biblioteca y necesita saber su IP actual. También agregué lo genial Contadores del mundo y los índices bursátiles de widgetbox.com.

Un par de otros widgets útiles que vale la pena mencionar para este tipo de visualización en tiempo real de página completa: el primero es un widget de cuenta regresiva de widgetbox.com. Cuando lo configura, le da una fecha y un evento para contar hacia atrás, y se muestra en el widget como una cuenta regresiva de texto hacia ese evento (vea la pantalla grande que muestra dos imágenes desde aquí).

Y ninguna visualización de datos de ciencia ficción estaría completa sin un gráfico girado de la Tierra que muestre información de temperatura en tiempo real desde cualquier punto del planeta que desee. Puede obtener esos datos del Weather-3D widget de Widgetbox.com.

En la imagen a continuación de mi panel de datos en tiempo real de página completa, puede ver la cuenta regresiva en la parte superior del página (la inserté centrada antes de la tabla en sí) y el globo meteorológico 3D justo debajo de la cuenta regresiva mundial widget En la última columna de la tabla agregué el nivel de amenaza actual del DHS, curvas sexy (más para decoración que cualquier otra cosa, se ve genial), y finalmente el widget de alerta en tiempo real de Centro Nacional de Huracanes.

Con la página finalmente completada, ahora tengo acceso a la hora actual, el clima local y global, la información del mercado de valores, precios actuales de la gasolina, alertas actuales de huracanes, niveles de amenaza nacional y, por supuesto, la gran cantidad de datos mundiales en la cuenta regresiva mundial widget

Puede ajustar este tipo de pantalla con la información que desee buscando otros widgets informativos en cualquiera de los principales sitios de widgets, y luego insertarlos en su diseño donde quieras La capacidad de Kompozer para centrar y alinear fácilmente las celdas le permitirá hacer que toda la pantalla se vea limpia y realmente genial. Una vez que haya terminado, puede cargar el archivo HTML en su propio servidor web para que pueda acceder a él desde cualquier parte del mundo.

Cree su propio panel informativo y háganos saber cómo va. ¿Qué otros widgets útiles descubriste para obtener información en tiempo real? Compártalos en el área de comentarios a continuación. ¡Me encantaría ver qué otros widgets geniales encontraron las personas!

Credito de imagen: Gráfico de telecomunicaciones a través de Shutterstock