13 Widgets, die eine fantastische Echtzeit-Datenanzeige ermöglichen

Wenn Sie eine vielbeschäftigte Person sind, die nicht wirklich viel Zeit hat, um die Nachrichten jeden Tag abzurufen, möchten Sie sich doch gerne über die neuesten Großereignisse wie große Stürme, die Börse oder bedeutende Veränderungen auf der ganzen Welt informieren ist eine grafische Anzeige viel effizienter.

Sie haben wahrscheinlich Beispiele einiger Börsenmaklerbüros gesehen, bei denen es einen Monitor mit vielen Diagrammen, Grafiken und anderen Grafiken gibt, die alle Daten in Echtzeit anzeigen. Oder vielleicht haben Sie diese coolen NASA-Startcenter-Displays mit allen möglichen wichtigen Daten auf dem Bildschirm gesehen.

Meiner Meinung nach ist das der beste Weg, um auf kleinem Raum viele Informationen anzuzeigen. Und wenn Sie wie ich mit zwei oder drei Bildschirmen arbeiten, haben Sie den Monitorraum, um die ganze Zeit über ein Display zu haben - wo Sie mit einem Blick sehen können, was auf der ganzen Welt vor sich geht.

In diesem Artikel werde ich Sie durch meine Bemühungen führen, diese Art von Anzeige mit sehr einfachen Web-Design-Tools und -Techniken zusammenzustellen. Ich werde auch 15 der besten Online-Dashboard-Widgets teilen, die ich im Internet gefunden habe und die dazu beigetragen hat, diese große Informationsanzeige der Weltinformationen zu erstellen.

Erstellen einer Echtzeitanzeige von Weltdaten

Netvibes ist einer der ersten Orte, an denen ich mich auf den Weg gemacht habe, um eine solche Informationsanzeige zu erstellen. Wir haben die Website häufig behandelt, wie in Angelas beeindruckendem Artikel, wie Sie Ihr Leben damit verwalten können. So verwalten Sie Ihr Leben vollständig online mit Netvibes. Wie führen Sie Ihr Leben vollständig online mit Netvibes durch. Lesen Sie weiter .

Ich mag Netvibes auch wirklich sehr, und nachdem ich Angelas Artikel gelesen hatte, begann ich damit zu beginnen, Links und Tools für jede der Hauptaufgaben zu organisieren, die ich online erledigen muss. Es ist schön, alles an einem Ort zu haben. Als ich jedoch mit dem HTML-Gadget versuchte, Widgets in die Seite einzubetten, fiel mir auf, dass es nicht sehr gut funktioniert. Sie können die Breite ändern, aber die Höhe scheint fest zu bleiben - größere Widgets werden abgeschnitten.

Nachdem Sie ein paar andere Websites ausprobiert haben - Protopage: So erstellen Sie ein Portfolio aus Ihrer Online-Arbeit mit Protopage So erstellen Sie ein Portfolio aus Ihrer Online-Arbeit mit Protopage - Lesen Sie mehr. Es hat zu viel Platz auf den Seiten der Widgets hinzugefügt und erlaubte keine korrekte Größenanpassung. Nachdem ich zu viel Zeit damit verbracht hatte, bereits existierende Seiten zum Laufen zu bringen, entschied ich mich, eine völlig neue Seite zu entwerfen.

Ich wollte eine Lösung entwickeln, die jeder ohne Rücksicht auf Web-Design-Erfahrung tun kann. Mein WYSIWYG-Webdesign-Tool meiner Wahl ist Kompozer. Der einzige Nachteil bei diesem Ansatz besteht darin, dass Tabellen verwendet werden, die in der Welt der Webdesigner im Vergleich zur Verwendung von CSS als archaisch gelten. Der Einfachheit halber verwenden wir Kompozer und legen die Widgets direkt auf der Seite an.

So sieht die Entwurfsansicht in Kompozer aus, nachdem Sie eine Tabelle eingefügt haben. In diesem Fall verwende ich eine 4 x 4-Tabelle. Sie können sie jedoch beliebig groß gestalten.

Klicken Sie zuerst mit der rechten Maustaste auf die Tabelle und ändern Sie die Eigenschaften, sodass die Linien keine Farbe haben (unsichtbar). Das erste Widget, das ich in die obere linke Zelle eingefügt habe, war ein cooles Uhr-Widget von clocklink.com. Darunter habe ich ein Wetter-Widget von Accuweather.com hinzugefügt - eines meiner Favoriten, da es eine coole grafische Radaranzeige von herannahenden Stürmen zeigt.

In jedem Fall klicke ich einfach in die Zelle, in die ich den Widgetcode einfügen möchte, dann auf das Menü Einfügen und auf HTML. Fügen Sie einfach den Widgetcode in das sich öffnende Fenster ein.

Möglicherweise stellen Sie fest, dass Ihr Widget nicht zentriert ist oder zu weit vom oberen Rand der Zelle angezeigt wird. Das lässt sich in Kompozer ohne Programmierkenntnisse leicht beheben. Klicken Sie einfach mit der rechten Maustaste auf die Zelle, wählen Sie die Eigenschaften der Tabellenzelle aus und ändern Sie dann die Inhaltsausrichtung so, wie es am besten aussieht.

Um Ihre Änderungen zu testen, speichern Sie die Datei einfach als HTML-Datei auf Ihrem lokalen Computer und zeigen Sie die Datei dann mit Ihrem bevorzugten Browser an. Wenn Sie wirklich Probleme haben, können Sie immer Code einfügen, wenn Sie wirklich müssen. In Kompozer können Sie die Seite bearbeiten, indem Sie auf klicken “Quelle” Tab. Zum Beispiel gab es einige Fälle, in denen ich nur eine Pause einfügen musste
um ein Leerzeichen zwischen einigen Widgets zu erzwingen, die ich in derselben Zelle platziert habe.

Ich fügte drei weitere der besten Widgets hinzu, die ich gefunden hatte, und entwickelte die in Echtzeit abgebildete Echtzeitanzeige. Die drei coolen Widgets, die ich hinzugefügt habe, waren das Gaspreise-Widget von gas-cost.net, das Rohstoff-Widget und die aktuellen Widgets für Wechselkurse von 100widgets.com.

Dies sind alle Echtzeit-Widgets, die aktuelle Daten aus aller Welt anzeigen. Jetzt habe ich die zweiten Daten zu Preisen, Aktienkursen und Wetter auf einen Blick. Aber nur die Hälfte der Webseite ist gefüllt, und wir haben noch viel mehr Informationen, um auf dieser Seite aufbauen zu können - zwei weitere vollständige Datenspalten, um genau zu sein.

Ein weiteres wirklich cooles Widget, das ich der Seite hinzugefügt habe, war das Konfigurations-Widget [Nicht mehr verfügbar] des Benutzers von 100widgets.com. Dadurch erhalten Sie ein Feedback zu Ihrer aktuellen IP-Adresse, Computerinformationen und der Windows- / Browserversion. Dies ist hilfreich, wenn Sie unterwegs sind und von einem Hotel oder einer Bibliothek aus auf Ihre Seite zugreifen und Ihre aktuelle IP-Adresse kennen müssen. Ich habe auch die sehr coolen World Counters und die Aktienindizes von widgetbox.com hinzugefügt.

Einige andere nützliche Widgets, die für diese Art der ganzseitigen Echtzeitanzeige erwähnenswert sind - das erste ist ein Countdown-Widget von widgetbox.com. Wenn Sie es einrichten, geben Sie ihm ein Datum und ein Ereignis an, zu dem heruntergezählt werden soll, und es wird im Widget als Text-Countdown für dieses Ereignis angezeigt (siehe die große Anzeige, die zwei Bilder von hier unten zeigt)..

Und keine Anzeige von Sci-Fi-Daten wäre ohne eine gedrehte Erdgrafik mit Echtzeit-Temperaturinformationen von jedem beliebigen Punkt des Planeten möglich. Sie können diese Daten über das Wetter-3D-Widget von Widgetbox.com abrufen.

In der Abbildung unten in meinem Echtzeit-Daten-Dashboard für ganzseitige Daten sehen Sie den Countdown ganz oben auf der Seite (ich habe ihn vor der Tabelle selbst zentriert eingefügt) und die 3D-Wetterkugel direkt unter dem World Countdown-Widget. In der letzten Spalte der Tabelle fügte ich die aktuelle DHS-Bedrohungsstufe hinzu, sexy Kurven (mehr zur Dekoration als alles andere - sieht cool aus) und schließlich das Echtzeitalert-Widget des National Hurricane Center.

Nach Fertigstellung der Seite habe ich nun Zugriff auf die aktuelle Uhrzeit, lokales und globales Wetter, Börseninformationen, aktuelle Gaspreise, aktuelle Hurrikanwarnungen, nationale Bedrohungsniveaus und natürlich die Lasten der Weltdaten im Welt-Countdown-Widget.

Sie können diese Art der Anzeige mit beliebigen Informationen optimieren, indem Sie auf einer der wichtigsten Widget-Websites nach anderen informativen Widgets suchen und diese dann an beliebiger Stelle in Ihr Layout einfügen. Dank der Fähigkeit von Kompozer, Zellen einfach zu zentrieren und auszurichten, können Sie das gesamte Display sauber und cool aussehen lassen. Wenn Sie fertig sind, können Sie die HTML-Datei einfach auf Ihren eigenen Webhost hochladen, sodass Sie von überall auf der Welt darauf zugreifen können.

Erstellen Sie Ihr eigenes Informations-Dashboard und teilen Sie uns mit, wie es läuft. Welche anderen nützlichen Widgets haben Sie für Echtzeitinformationen entdeckt? Teilen Sie sie unten in den Kommentaren - ich würde gerne sehen, was andere coole Widgets von den Leuten gefunden haben!

Bildnachweis: Telekommunikationsgrafik über Shutterstock