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

Si usted es una persona ocupada que realmente no tiene mucho tiempo para consultar 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 geniales 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 una pantalla 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 impresionante artículo de Angela sobre cómo usarlo para administrar su vida Cómo administrar su vida completamente en línea usando Netvibes Cómo administrar su vida completamente en línea usando Netvibes .

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 Cómo hacer un portafolio de su trabajo en línea con Protopage Cómo hacer un portafolio de su trabajo en línea con Protopage 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í pasar 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 usar 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 haber insertado 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 meteorológico de Accuweather.com, uno de mis favoritos porque muestra una visualización gráfica de radar 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 el “fuente” lengüeta. 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 básicos y los 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é los excelentes World Counters 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 widget Weather-3D 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 de la página (la inserté centrada antes de la propia tabla) y el globo meteorológico 3D justo debajo del widget de cuenta regresiva mundial. En la última columna de la tabla agregué el nivel de amenaza actual del DHS, curvas sexys (más para decoración que cualquier otra cosa, se ve genial) y, finalmente, el widget de alerta en tiempo real del 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, los precios actuales del gas, las alertas actuales de huracanes, los niveles de amenaza nacional y, por supuesto, la gran cantidad de datos mundiales en el widget de cuenta regresiva mundial.

Puede ajustar este tipo de visualización con la información que desee buscando otros widgets informativos en cualquiera de los principales sitios de widgets y luego insertándolos en su diseño donde desee. 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 funciona. ¿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!

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