13 widgets som gör en fantastisk realtidsdatavisning

Annons

Om du är en upptagen person som egentligen inte har så mycket tid att kolla nyheterna varje dag, men du gillar att hålla dig uppdaterad med de senaste stora händelserna som stora stormar, aktiemarknaden eller stora förändringar i hela världen, är en grafisk display mycket mer effektiv.

Du har förmodligen sett exempel på några aktiemäklarkontor där det finns en bildskärm med massor av diagram, grafer och annan grafik som alla visar data i realtid. Eller kanske du har sett de coola NASA-lanseringscentrumskärmarna med alla slags viktiga data som rullar över skärmen.

Enligt min mening är det det bästa sättet att visa mycket information på ett litet utrymme. Och om du arbetar med två eller tre skärmar som jag är, så har du skärmutrymmet för att ha en visa upp hela tiden - där du kan kolla vad som händer i hela världen med bara en blick.

I den här artikeln kommer jag att gå igenom mina ansträngningar att sätta ihop den typen av skärm med mycket enkla verktyg och tekniker för webbdesign. Jag kommer också att dela 15 av de bästa online-instrumentpanelerna som jag hittade på hela internet som hjälpte till att bygga denna stora informationsvisning av världsinformation.

Bygga en realtidsvisning av världsdata

En av de första platserna som jag åkte till för att bygga en sådan informationsdisplay är Netvibes. Vi har behandlat webbplatsen ofta, till exempel i Angelas fantastiska artikel om hur du använder det för att hantera ditt liv Hur man skapar ett riktigt nyhetsflöde med RSSKombinera RSS-utgångar med ett par tredjepartsverktyg och skapa ett anpassat nyhetsflöde som bara innehåller legitima berättelser du bryr dig om. Vi visar hur du i denna steg-för-steg-guide. Läs mer .

Jag gillar verkligen Netvibes också, och efter att ha läst Angelas artikel började jag faktiskt använda den för att organisera länkar och verktyg för var och en av de viktigaste uppgifterna som jag måste göra online. Det är trevligt att ha allt på ett ställe. Men när jag försökte använda HTML-gadgeten för att bädda in widgets på sidan, såg jag att den inte fungerar särskilt bra. Du kan ändra storlek på bredden, men höjden verkar förbli fast - avskärning av större widgetar.

Efter att ha provat några andra webbplatser - Protopage De bästa webbplatsbyggarna för att skapa en ren onlineportföljVilken gratis webbplatsbyggare är bäst för din portfölj? Här är de bästa webbplatsbyggarna du kan välja mellan! Läs mer var en annan som inte fungerade riktigt. Det lägger till för mycket utrymme på sidorna på widgetarna och tillät inte korrekt storlek. Så, efter att ha ägnat för mycket tid på att försöka få tidigare existerande sidor att fungera, beslutade jag att vända mig till att designa en sida från början.

Jag ville komma med en lösning som vem som helst kunde göra, oavsett erfarenhet av webbdesign. Mitt val av WYSIWYG webbdesign är Kompozer. Den enda nackdelen med detta tillvägagångssätt är att det använder tabeller, som i webbdesigners värld betraktas som arkaiska jämfört med att använda CSS. Men för enkelhets skull kommer vi att använda Kompozer och lägga upp widgets precis på sidan.

Så här ser designvyn i Kompozer ut efter att du har lagt in ett bord - i det här fallet använder jag ett 4 för 4-bord, men du kan göra det i vilken storlek du vill.

Högerklicka först på tabellen och ändra egenskaperna så att raderna inte blir färgade (osynliga). Den första widgeten som jag satte in i den övre vänstra cellen var en cool klockwidget från clocklink.com. Under det lägger jag till en väderwidget från Accuweather.com - en av mina favoriter eftersom den visar en cool grafisk radardisplay av stormar som närmar sig.

I båda fallen klickar jag helt enkelt in i cellen som jag vill infoga widgetkod, klicka sedan på Infoga-menyn och välj HTML. Klistra bara in widgetkoden i fönstret som dyker upp.

Du kanske märker att din widget inte är centrerad eller att den visas för långt ner från toppen av cellen. Det är lätt att fixa i Kompozer utan kodningskunskap alls. Högerklicka bara på cellen, välj tabellcellegenskaper och ändra sedan innehållsinriktningen till vad som ser bäst ut.

För att testa dina ändringar, spara bara filen på din lokala dator som en HTML-fil och sedan visa filen med din favoritwebbläsare. Om du verkligen har problem kan du alltid sätta in kod om du verkligen måste. I Kompozer kan du redigera sidan genom att klicka på fliken "källa". Till exempel fanns det ett par fall där jag bara var tvungen att sätta in en paus
att tvinga ett utrymme mellan några av widgets som jag placerade i samma cell.

Lägga till ytterligare tre av de bästa widgetarna som jag hittade jag hade utvecklat informationsdisplayen i realtid som visas nedan. De tre coola widgetarna jag lagt till var Gaspriser-widgeten från gas-cost.net, och den råvarevidget och nuvarande växelkurs widgets från 100widgets.com.

Dessa är alla realtidswidgets som visar aktuell information från hela världen. Nu har jag fått uppdaterad information om priser, aktiekurser och väder, allt med en enda blick. Men bara hälften av webbsidan är fylld, och vi har mycket mer information att bygga på den här sidan - ytterligare två hela kolumner med data för att vara exakt.

En annan riktigt cool widget som jag lagt till på sidan var användarens konfigurationswidget [No Longer Available] från 100widgets.com. Detta ger dig feedback om din nuvarande IP-adress, datainfo och Windows / webbläsarversion. Detta är användbart när du är på väg och ansluter till din sida från ett hotell eller bibliotek och behöver känna till din nuvarande IP. Jag har också lagt till det väldigt coola Världsräknare och aktieindex från widgetbox.com.

Ett par andra användbara widgetar som är värda att nämna för denna typ av hemsida i realtid - den första är en nedräkningswidget från widgetbox.com. När du ställer in den ger du den ett datum och en händelse att räkna ner till, och den visas i widgeten som en textnedräkning mot den händelsen (se den stora skärmen som visar två bilder härifrån).

Och ingen sci-fi-datadisplay skulle vara komplett utan en roterad grafik av jorden som visar realtemperaturinformation från någon punkt på planeten som du gillar. Du kan hämta informationen från Weather-3D widget från Widgetbox.com.

På bilden nedan på min hemsida i realtid datadashboard kan du se nedräkningen högst upp på sida (jag satte in den mitt i mitt bord före själva bordet) och 3d väderklotet strax nedanför nedräkningen i världen widget. I den sista kolumnen i tabellen lade jag till nuvarande DHS-hotnivå, sexiga kurvor (mer för dekoration än någonting annat - det ser coolt ut) och slutligen larm widgeten i realtid från National Hurricane Center.

När sidan slutligen är klar har jag nu tillgång till aktuell tid, lokalt och globalt väder, aktiemarknadsinformation, nuvarande gaspriser, aktuella orkanvarningar, nationella hotnivåer och naturligtvis massorna av världsdata i nedräkningen i världen widget.

Du kan finjustera denna typ av skärm med vilken information du vill genom att söka efter andra informationswidgets på någon av de stora widgetwebbplatserna och sedan infoga dem i din layout var du än vill. Kompozers förmåga att enkelt centrera och justera celler gör att du kan göra hela skärmen ser ren och riktigt cool. När du är klar kan du bara ladda upp HTML-filen till din egen webbhotell så att du kan komma åt den var som helst i världen.

Skapa din egen informationspanel och låt oss veta hur det går. Vilka andra användbara widgetar upptäckte du för information i realtid? Dela dem i kommentarområdet nedan - Jag skulle gärna vilja se vilka andra coola widgets som människor hittade!

Bildkredit: Telekommunikationsgrafik via Shutterstock