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

Si eres una persona ocupada que realmente no tiene mucho tiempo para revisar las noticias todos los días, pero te gusta estar al día con los últimos eventos importantes, como las principales tormentas, el mercado de valores o los principales cambios 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 gráficos, gráficos y otros gráficos que muestran 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 desplazándose 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 en todo momento, donde puede ver lo que está pasando en todo el mundo con solo un vistazo..

En este artículo, les mostraré 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 de instrumentos en línea que encontré en Internet que ayudaron a construir esta gran exhibición informativa de información mundial..

Construyendo una pantalla en tiempo real de datos mundiales

Uno de los primeros lugares a los que fui para crear una pantalla informativa de este tipo es Netvibes. Hemos cubierto el sitio a menudo, como en el asombroso artículo de Angela sobre cómo usarlo para administrar su vida Cómo administrar su vida completamente en línea con Netvibes Cómo administrar su vida completamente en línea con Netvibes Leer más .

Realmente me gusta Netvibes también, y después de leer el artículo de Angela, comencé a usarlo para organizar enlaces y herramientas para cada una de las tareas principales que tengo que hacer en línea. Es bueno tener todo en un solo lugar. Sin embargo, cuando intenté usar el gadget HTML para insertar widgets en la página, noté que no funciona muy bien. Puede redimensionar el 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 Leer más fue otro que no funcionó 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 de diseño web. Mi herramienta de diseño web WYSIWYG preferida 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 para simplificar, vamos a utilizar Kompozer y colocar los widgets en la misma 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 hacerlo de cualquier tamaño que desee..

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

En cada caso, simplemente hago clic dentro de la celda donde 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 lejos de la parte superior de la celda. Eso es fácil de solucionar en Kompozer sin ningún conocimiento de codificación. Simplemente haga clic con el botón derecho en la celda, elija las propiedades de 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 con su navegador favorito. Si realmente tiene problemas, siempre puede insertar el código si es necesario. En Kompozer, puede editar la página haciendo clic en el “fuente” lengüeta. Por ejemplo, hubo un par de casos en los que tuve que insertar un descanso.
para forzar un espacio entre algunos de los widgets que coloqué dentro de la misma celda.

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

Estos son todos los widgets en tiempo real, que muestran datos actuales de todo el mundo. Ahora tengo hasta el segundo dato sobre precios, tasas de existencias y 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 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 proporciona 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 contadores mundiales 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 de página completa en tiempo real, el primero es un widget de cuenta atrás de widgetbox.com. Cuando lo configura, le da una fecha y un evento para la cuenta regresiva, y se muestra en el widget como una cuenta regresiva de texto hacia ese evento (vea la pantalla grande que se muestra dos imágenes abajo desde aquí).

Y ninguna pantalla de datos con apariencia 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 la página completa, puede ver la cuenta regresiva en la parte superior de la página (la inserté centrada antes de la tabla en sí) y el globo meteorológico 3D justo debajo del widget de cuenta regresiva del mundo. En la última columna de la tabla agregué el nivel de amenaza actual del DHS, curvas atractivas (más para la decoración que para cualquier otra cosa, se ve bien) 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, al clima local y global, a la información del mercado de valores, a los precios actuales de la gasolina, a las alertas actuales de huracanes, a los niveles de amenazas nacionales y, por supuesto, a la gran cantidad de datos mundiales en el widget de cuenta atrás mundial..

Puede modificar este tipo de visualización con la información que desee buscando otros widgets informativos en cualquiera de los sitios de widgets más importantes, y luego insertándolos en su diseño donde lo 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 hayas terminado, puedes subir el archivo HTML a tu propio servidor web para que puedas acceder a él desde cualquier lugar 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ártelos en el área de comentarios a continuación. Me encantaría ver qué encontraron otros usuarios geniales.!

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