13 widgets permettant un affichage de données en temps réel impressionnant

Si vous êtes une personne occupée, vous n'avez pas vraiment le temps de regarder les actualités tous les jours, mais vous aimez vous tenir au courant des derniers événements majeurs tels que les tempêtes, la bourse ou les grands changements dans le monde. , un affichage graphique est beaucoup plus efficace.

Vous avez probablement déjà vu des exemples de bureaux de courtiers en valeurs mobilières dans lesquels il existe un moniteur avec de nombreux tableaux, graphiques et autres graphiques affichant tous des données en temps réel. Ou peut-être avez-vous déjà vu les super écrans de centre de lancement de la NASA avec toutes sortes de données importantes défiler à l'écran.

À mon avis, c'est la meilleure façon de montrer beaucoup d'informations dans un petit espace. Et si vous travaillez avec deux ou trois écrans comme moi, alors vous avez l’espace moniteur pour afficher tout le temps, ce qui vous permet de voir en un coup d’œil ce qui se passe dans le monde entier..

Dans cet article, je vais vous présenter mes efforts pour créer ce type d’affichage à l’aide d’outils et de techniques de conception Web très simples. Je vais également partager 15 des meilleurs widgets de tableau de bord en ligne que j'ai trouvés sur Internet et qui ont permis de créer ce grand affichage informatif d'informations mondiales..

Construire un affichage en temps réel des données mondiales

Netvibes est l’un des premiers endroits où je me suis rendu pour créer un tel écran d’affichage. Nous avons souvent couvert le site, comme dans le superbe article d'Angela sur son utilisation pour gérer sa vie. Comment gérer votre vie entièrement en ligne avec Netvibes Comment gérer votre vie entièrement en ligne avec Netvibes En savoir plus .

J'aime aussi beaucoup Netvibes et, après avoir lu l'article d'Angela, j'ai commencé à l'utiliser pour organiser des liens et des outils pour chacune des tâches principales que je dois effectuer en ligne. C'est bien d'avoir tout au même endroit. Cependant, lorsque j'ai essayé d'utiliser le gadget HTML pour incorporer des widgets dans la page, j'ai constaté que cela ne fonctionnait pas très bien. Vous pouvez redimensionner la largeur, mais la hauteur semble rester fixe - couper les widgets plus grands.

Après avoir essayé quelques autres sites - Protopage Comment créer un portfolio de votre travail en ligne avec Protopage Comment créer un portfolio de votre travail en ligne avec Protopage Read More était un autre problème qui ne fonctionnait pas correctement. Cela ajoutait trop d'espace sur les côtés des widgets et ne permettait pas un redimensionnement correct. Donc, après avoir passé trop de temps à essayer de faire fonctionner des pages préexistantes, j'ai décidé de concevoir une page à partir de zéro..

Je voulais proposer une solution que tout le monde pouvait faire, quelle que soit l'expérience de la conception Web. Mon outil de conception de sites Web WYSIWYG est Kompozer. Le seul inconvénient de cette approche est qu’elle utilise des tableaux, ce qui dans le monde des concepteurs de sites Web est considéré comme archaïque par rapport à l’utilisation de CSS. Mais pour simplifier, nous allons utiliser Kompozer et afficher les widgets directement sur la page..

Voici comment se présente la vue de conception dans Kompozer après l'insertion d'un tableau. Dans ce cas, j'utilise un tableau 4 sur 4, mais vous pouvez le créer à la taille de votre choix..

Commencez par cliquer avec le bouton droit de la souris sur la table et modifiez les propriétés pour que les lignes ne soient pas de couleur (invisible). Le premier widget que j'ai inséré dans la cellule en haut à gauche était un widget horloge cool de clocklink.com. En-dessous, j'ai ajouté un widget météo de Accuweather.com - l'un de mes favoris, car il affiche un affichage radar graphique cool de toute tempête imminente..

Dans chaque cas, il suffit de cliquer dans la cellule pour insérer le code du widget, puis de cliquer sur le menu Insertion et de choisir HTML. Il suffit de coller le code du widget dans la fenêtre qui apparaît.

Vous remarquerez peut-être que votre widget n'est pas centré ou il apparaît trop loin du haut de la cellule. C'est facile à corriger dans Kompozer sans aucune connaissance en matière de codage. Faites un clic droit sur la cellule, choisissez les propriétés de la cellule du tableau, puis modifiez l'alignement du contenu en fonction de ce qui vous convient le mieux..

Pour tester vos modifications, enregistrez simplement le fichier sur votre ordinateur local en tant que fichier HTML, puis affichez le fichier à l'aide de votre navigateur préféré. Si vous avez vraiment des problèmes, vous pouvez toujours insérer du code si vous en avez vraiment besoin. Dans Kompozer, vous pouvez éditer la page en cliquant sur le bouton “la source” languette. Par exemple, il y a eu quelques cas où j'ai juste dû insérer une pause
pour forcer un espace entre certains des widgets que j'ai placés à l'intérieur de la même cellule.

En ajoutant trois des meilleurs widgets que j'ai trouvés, j'ai développé l'affichage d'information en temps réel présenté ci-dessous. Les trois widgets intéressants que j'ai ajoutés étaient le widget Prix de l'essence de gas-cost.net, et le widget de produits de base et les widgets de taux de change actuels de 100widgets.com..

Ce sont tous des widgets en temps réel, affichant les données actuelles du monde entier. Je dispose maintenant d'un seul coup d'œil sur les prix, les cours des actions et les conditions météorologiques. Mais seulement la moitié de la page Web est remplie, et nous avons beaucoup plus d'informations à construire sur cette page - deux autres colonnes entières de données pour être exact.

Un autre widget vraiment génial que j'ai ajouté à la page était le widget de configuration de l'utilisateur [Non disponible plus] de 100widgets.com. Cela vous donne des informations sur votre adresse IP actuelle, les informations sur votre ordinateur et la version de Windows / du navigateur. Ceci est utile lorsque vous êtes sur la route et que vous vous connectez à votre page depuis un hôtel ou une bibliothèque et que vous devez connaître votre adresse IP actuelle. J'ai aussi ajouté les très cool World Counters et les indices boursiers de widgetbox.com.

Quelques autres widgets utiles qui méritent d’être mentionnés pour ce type d’affichage en temps réel sur une page complète - le premier est un widget de compte à rebours de widgetbox.com. Lorsque vous le configurez, vous lui attribuez une date et un événement à décompter, qui apparaît dans le widget sous la forme d'un compte à rebours de texte vers cet événement (voir le grand écran qui présente deux images ci-dessous)..

Et aucun affichage de données à la recherche de science-fiction ne serait complet sans un graphique pivoté de la Terre affichant des informations de température en temps réel de n’importe quel point de la planète que vous aimez. Vous pouvez obtenir ces données à partir du widget Météo-3D de Widgetbox.com..

Dans l'image ci-dessous de mon tableau de bord des données en temps réel, vous pouvez voir le compte à rebours tout en haut de la page (je l'ai inséré centré devant le tableau lui-même), ainsi que le globe météo 3D situé juste en dessous du widget compte à rebours mondial. Dans la dernière colonne du tableau, j'ai ajouté le niveau de menace actuel du DHS, des courbes sexy (plus pour la décoration que toute autre chose - il a l'air cool), et enfin le widget d'alerte en temps réel du National Hurricane Center..

La page étant finalement terminée, j'ai maintenant accès à l'heure actuelle, à la météo locale et mondiale, aux informations boursières, aux prix actuels de l'essence, aux alertes d'ouragan actuelles, aux niveaux de menace nationaux et, bien sûr, aux nombreuses données mondiales contenues dans le compte à rebours..

Vous pouvez modifier ce type d’affichage avec les informations de votre choix en recherchant d’autres widgets d’information sur l’un des principaux sites de widgets, puis en les insérant dans votre présentation où vous le souhaitez. La capacité de Kompozer à centrer et à aligner facilement les cellules vous permettra de donner à tout l’affichage un aspect net et vraiment cool. Une fois que vous avez terminé, vous pouvez simplement télécharger le fichier HTML sur votre propre hébergeur afin de pouvoir y accéder depuis n'importe où dans le monde..

Créez votre propre tableau de bord d’information et dites-nous comment cela se passe. Quels autres widgets utiles avez-vous découverts pour des informations en temps réel? Partagez-les dans la zone de commentaires ci-dessous - j'aimerais voir ce que les autres widgets intéressants trouvés!

Crédit d'image: Graphique de télécommunications via Shutterstock