Si eres una persona ocupada que realmente no tiene mucho tiempo para ver las noticias todos los días, pero te gusta mantenerte al día con los últimos eventos importantes como tormentas importantes, el mercado de valores o grandes cambios en todo el mundo., una pantalla gráfica es mucho más eficiente.
Probablemente haya visto ejemplos de algunas oficinas de agentes de bolsa en las que hay un monitor con muchas tablas, gráficos y otros gráficos que muestran datos en tiempo real. O tal vez hayas visto esas fantásticas pantallas del centro de lanzamiento de la NASA con toda clase 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 abierta todo el tiempo, donde puede ver lo que sucede en todo el mundo con solo echar un vistazo.
En este artículo, voy a guiarte a través de mis esfuerzos para armar ese tipo de visualización usando 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 me ayudaron a construir esta gran pantalla informativa de información mundial.
Construcción de una visualización en tiempo real de datos mundiales
Uno de los primeros lugares a los que acudí para crear una pantalla informativa de este tipo 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 Uso de Netvibes Cómo administrar su vida completamente en línea Uso de Netvibes Lea más.
También me gusta 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 traté de usar el gadget HTML para insertar widgets en la página, noté que no funcionaba muy bien. Puedes 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 una cartera de su trabajo en línea con Protopage Cómo hacer una cartera de su trabajo en línea con Protopage Lea más fue otro que no funcionó del todo bien. Agregó demasiado espacio en los lados de los widgets, y no permitió el cambio de tamaño adecuado. Entonces, después de pasar demasiado tiempo tratando de hacer funcionar las páginas preexistentes, decidí dedicarme 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 es Kompozer. El único inconveniente de este enfoque es que usa 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 tengan 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 del clima de Accuweather.com, uno de mis favoritos, ya que muestra una pantalla gráfica de radar fresca de cualquier tormenta que se aproxima.
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 con el botón derecho en la celda, elija las propiedades de la celda de la tabla y luego cambie la alineación de contenido a la 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 el 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
forzar un espacio entre algunos de los widgets que coloqué dentro de la misma celda.
Añadiendo tres más 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 Gas Prices de gas-cost.net y el widgets de artículos y widgets de tasas de cambio actuales de 100widgets.com.
Estos son todos los widgets en tiempo real, que muestran datos actuales de todo el mundo. Ahora tengo datos actualizados sobre los precios, las tasas de existencias 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 compilar en esta página, dos columnas de datos más completas para ser exactos.
Otro widget realmente genial que agregué a la página fue el widget de configuración del usuario de 100widgets.com. Esto le da retroalimentación en cuanto a 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 conectando su página desde un hotel o biblioteca y necesita conocer 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 a toda página: el primero es un widget de cuenta regresiva 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 de texto hacia ese evento (consulte la pantalla grande que muestra dos imágenes hacia abajo desde aquí).
Y ninguna pantalla de datos de aspecto 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 debajo 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 tabla) y el globo del tiempo 3d justo debajo del widget de cuenta regresiva mundial. En la última columna de la tabla, agregué el nivel actual de amenaza de DHS, curvas atractivas (más por decoración que 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, clima local y global, información bursátil, precios actuales del gas, alertas actuales de huracanes, niveles de amenazas nacionales y, por supuesto, la carga de datos mundiales en el widget de cuenta regresiva mundial.
Puede modificar este tipo de pantalla con la información que desee mediante la búsqueda de otros widgets informativos en cualquiera de los principales sitios de widgets, y luego insertarlos 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 simplemente cargar el archivo HTML en su propio servidor web para que pueda acceder a él desde cualquier lugar 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ártelos en el área de comentarios a continuación. ¡Me encantaría ver qué otros widgets geniales encontraron las personas!
Crédito de la imagen: Gráfico de telecomunicaciones a través de Shutterstock