13 widgets die een fantastisch real-time gegevensdisplay maken

Als je een druk persoon bent die niet echt heel veel tijd heeft om het nieuws elke dag te bekijken, maar je houdt ervan op de hoogte te blijven van de nieuwste grote evenementen zoals grote stormen, de aandelenmarkt of grote veranderingen over de hele wereld , een grafisch display is veel efficiënter.

U hebt waarschijnlijk voorbeelden gezien van sommige effectenmakelaarskantoren waar een monitor is met veel grafieken, grafieken en andere grafische weergaven die alle gegevens in realtime weergeven. Of misschien heb je die coole NASA-lanceringscenter-displays gezien met allerlei belangrijke gegevens die over het scherm schuiven.

Naar mijn mening is dat de beste manier om veel informatie in een kleine ruimte te tonen. En als u met twee of drie schermen werkt zoals ik ben, dan heeft u de ruimte op de monitor om altijd weer te worden weergegeven - waar u met een oogopslag kunt zien wat er in de wereld gebeurt.

In dit artikel zal ik u helpen bij het samenstellen van dat soort weergave met behulp van zeer eenvoudige hulpmiddelen en technieken voor webontwerp. Ik ga ook 15 van de beste online dashboardwidgets delen die ik op het internet heb gevonden en die hebben geholpen bij het bouwen van deze grote informatieve weergave van wereldinformatie..

Een realtime weergave van wereldgegevens opbouwen

Een van de eerste plaatsen waar ik naartoe ging om zo'n informatieve display te bouwen, is Netvibes. We hebben de site vaak behandeld, zoals in het geweldige artikel van Angela over hoe je het kunt gebruiken om je leven te beheren. Hoe je je leven volledig online kunt beheren met Netvibes Hoe je je leven volledig online kunt beheren met Netvibes Meer lezen .

Ik vind Netvibes ook erg leuk en na het lezen van het artikel van Angela ben ik het daadwerkelijk gaan gebruiken om links en tools te organiseren voor elk van de belangrijkste taken die ik online moet doen. Het is fijn om alles op één plek te hebben. Toen ik echter probeerde de HTML-gadget te gebruiken om widgets in de pagina in te sluiten, merkte ik dat het niet erg goed werkte. Je kunt het formaat van de breedte aanpassen, maar de hoogte lijkt vast te blijven - het afsnijden van grotere widgets.

Na het uitproberen van een paar andere sites - Protopage Een portfolio van uw online werk maken met Protopage Een portfolio van uw online werk maken met Protopage Lees meer was een andere die niet helemaal goed werkte. Het voegde te veel ruimte toe aan de zijkanten van de widgets, en stond geen juiste grootte toe. Dus nadat ik teveel tijd had besteed aan het werken met reeds bestaande pagina's, besloot ik me om te zetten naar het ontwerpen van een geheel nieuwe pagina.

Ik wilde een oplossing bedenken die iedereen kon doen, ongeacht de ervaring met webdesign. Mijn WYSIWYG-webontwerpgereedschap naar keuze is Kompozer. Het enige nadeel van deze aanpak is dat het gebruikmaakt van tabellen, die in de wereld van webontwerpers als archaïsch worden beschouwd in vergelijking met het gebruik van CSS. Maar omwille van de eenvoud gaan we Kompozer gebruiken en de widgets op de pagina lay-out.

Hier ziet u hoe de ontwerpweergave in Kompozer ervoor zorgt dat u een tabel hebt ingevoegd - in dit geval gebruik ik een 4 bij 4 tabel, maar u kunt deze elke gewenste grootte geven.

Klik eerst met de rechtermuisknop op de tabel en wijzig de eigenschappen zodat de lijnen geen kleur hebben (onzichtbaar). De eerste widget die ik in de cel linksboven heb ingevoegd, was een coole klokwidget van clocklink.com. Daaronder heb ik een weer-widget toegevoegd van Accuweather.com - een van mijn favorieten omdat het een cool grafisch radarbeeld toont van naderende stormen.

In elk geval klik ik gewoon in de cel dat ik widgetcode wil invoegen, klik vervolgens op het menu Invoegen en kies HTML. Plak de widgetcode in het venster dat verschijnt.

U ziet mogelijk dat uw widget niet gecentreerd is, of dat deze te ver naar beneden vanaf de bovenkant van de cel wordt weergegeven. Dat is gemakkelijk te repareren in Kompozer zonder enige codeerkennis. Klik met de rechtermuisknop op de cel, kies de eigenschappen van de tabelcellen en wijzig de inhoudsuitlijning in wat het beste lijkt.

Om uw wijzigingen te testen, slaat u het bestand als een HTML-bestand op uw lokale computer op en bekijkt u vervolgens het bestand met uw favoriete browser. Als u echt problemen ondervindt, kunt u altijd code invoegen als dat echt nodig is. In Kompozer kunt u de pagina bewerken door op de knop te klikken “bron” tab. Er waren bijvoorbeeld een paar gevallen waarin ik gewoon een pauze moest invoegen
om een ​​spatie tussen sommige widgets te forceren die ik in dezelfde cel heb geplaatst.

Toen ik nog drie van de beste widgets toevoeg die ik had gevonden, had ik het realtime informatiedisplay hieronder weergegeven. De drie coole widgets die ik heb toegevoegd, waren de Gasprijzen widget van gas-cost.net, en de grondstoffen widget en huidige wisselkoersen widgets van 100widgets.com.

Dit zijn allemaal realtime-widgets die actuele gegevens van over de hele wereld weergeven. Nu heb ik de tweede gegevens over prijzen, aandelenkoersen en het weer, allemaal in één oogopslag. Maar slechts de helft van de webpagina is vol, en we hebben veel meer informatie om op deze pagina te kunnen bouwen - nog twee volledige kolommen met gegevens om exact te zijn.

Nog een hele gave widget die ik aan de pagina heb toegevoegd was de configuratie widget van de gebruiker [niet langer beschikbaar] van 100widgets.com. Dit geeft u feedback over uw huidige IP-adres, computerinformatie en Windows / browserversie. Dit is handig wanneer u onderweg bent en vanuit een hotel of bibliotheek verbinding wilt maken met uw pagina en uw huidige IP-adres moet weten. Ik heb ook de coole World Counters en de aandelenindexen van widgetbox.com toegevoegd.

Een paar andere handige widgets die het vermelden waard zijn voor dit soort real-time weergave van volledige pagina's - de eerste is een aftellende widget van widgetbox.com. Wanneer je het instelt, geef je het een datum en een gebeurtenis om naar te tellen, en het verschijnt in de widget als een aftelling van de tekst naar die gebeurtenis (zie het grote display getoond vanaf hier twee afbeeldingen).

En geen scifi op zoek naar gegevensweergave zou compleet zijn zonder een geroteerde afbeelding van de aarde die realtimetemperatuurinformatie weergeeft vanaf elk punt op de planeet die u leuk vindt. Je kunt die gegevens ophalen van de Weather-3D widget van Widgetbox.com.

In de onderstaande afbeelding van mijn real-time gegevensdashboard van volledige pagina kunt u het aftellen helemaal boven aan de pagina zien (ik heb het gecentreerd vóór de tabel zelf ingevoegd) en de 3d Weather globe net onder de wereldaftelwidget. In de laatste kolom van de tabel heb ik het huidige DHS-dreigingsniveau toegevoegd, sexy rondingen (meer voor decoratie dan iets anders - het ziet er cool uit), en tot slot de realtime waarschuwingswidget van het National Hurricane Center.

Nu de pagina definitief is voltooid, heb ik nu toegang tot de huidige tijd, lokaal en wereldwijd weer, beursinformatie, huidige gasprijzen, huidige orkaanwaarschuwingen, nationale dreigingsniveaus en natuurlijk de vele wereldgegevens in de wereld aftellen widget.

U kunt dit soort weergave aanpassen met de gewenste informatie door te zoeken naar andere informatieve widgets op een van de belangrijkste widgetsites en deze vervolgens in uw lay-out te plaatsen waar u maar wilt. Met de mogelijkheid om cellen eenvoudig te centreren en uit te lijnen, kun je het hele scherm er schoon en echt cool laten uitzien. Als u klaar bent, kunt u het HTML-bestand gewoon uploaden naar uw eigen webhost zodat u het overal ter wereld kunt openen.

Maak uw eigen informatiedashboard en laat ons weten hoe het gaat. Welke andere nuttige widgets heb je ontdekt voor realtime-informatie? Deel ze in het gedeelte met opmerkingen hieronder - Ik zou graag zien welke andere coole widgets mensen hebben gevonden!

Image Credit: telecommunicatie grafisch via Shutterstock