13 widgets, der gør en fantastisk realtidsdisplay

Reklame

Hvis du er en travl person, der ikke rigtig har en hel masse tid til at tjekke nyhederne hver dag, men du gerne vil holde dig opdateret med de seneste større begivenheder som store storme, aktiemarkedet eller større ændringer i hele verden, en grafisk visning er meget mere effektiv.

Du har sandsynligvis set eksempler på nogle aktiemæglerkontorer, hvor der er en skærm med masser af diagrammer, grafer og anden grafik, der alle viser data i realtid. Eller måske har du måske set de seje NASA-lanceringscenterskærme med alle mulige vigtige data, der ruller hen over skærmen.

Efter min mening er det den bedste måde at vise en masse information på et lille sted. Og hvis du arbejder med to eller tre skærme som jeg er, så har du skærmrummet til at have en vise hele tiden - hvor du kan tjekke, hvad der foregår i hele verden med bare en blik.

I denne artikel vil jeg lede dig gennem mine bestræbelser på at sammensætte den slags skærm ved hjælp af meget enkle web-design værktøjer og teknikker. Jeg vil også dele 15 af de bedste online dashboard-widgets, som jeg fandt overalt på internettet, som var med til at opbygge denne store informationsvisning af verdensinformation.

Opbygning af en realtidsvisning af verdensdata

Et af de første steder, jeg rejste til for at opbygge en sådan informativ skærm, er Netvibes. Vi har ofte dækket webstedet, som i Angelas fantastiske artikel om hvordan du bruger det til at styre dit liv Sådan opretter du et rigtigt nyhedsfeed med RSSKombiner RSS-output med et par tredjepartsværktøjer og opret et enkelt tilpasset nyhedsfeed, der kun indeholder legitime historier, du interesserer dig for. Vi viser dig, hvordan du i denne trin for trin guide. Læs mere .

Jeg kan virkelig godt lide Netvibes, og efter at have læst Angelas artikel, begyndte jeg faktisk at bruge den til at organisere links og værktøjer til hver af de vigtigste opgaver, som jeg skal udføre online. Det er dejligt at have alt på ét sted. Da jeg prøvede at bruge HTML-gadgeten til at integrere widgets på siden, bemærkede jeg, at den ikke fungerer særlig godt. Du kan ændre størrelsen på bredden, men højden ser ud til at forblive fast - afskæring af større widgets.

Efter at have prøvet et par andre websteder - Protopage De bedste webstedsbyggere til at oprette en ren online porteføljeHvilken gratis webstedsbygger er bedst til din portefølje? Her er de bedste webstedsbyggere, du kan vælge fra! Læs mere var en anden, der ikke rigtig fungerede rigtigt. Det tilføjede for meget plads på siderne af widgets og tillader ikke korrekt størrelse. Så efter at have brugt for meget tid på at prøve at få eksisterende sider til at fungere, besluttede jeg at vende mig til at designe en side fra bunden.

Jeg ville komme med en løsning, som enhver kunne gøre, uanset oplevelse af webdesign. Mit WYSIWYG webdesignværktøj, du vælger, er Kompozer. Den eneste ulempe ved denne tilgang er, at den bruger tabeller, som i webdesigners verden betragtes som arkaiske sammenlignet med at bruge CSS. Men for enkelheds skyld bruger vi Kompozer og lægger widgets lige på siden.

Det er sådan, hvordan designvisningen i Kompozer ser ud, efter at du har indsat en tabel - i dette tilfælde bruger jeg et 4 for 4-bord, men du kan gøre det, hvilken størrelse du ønsker.

Højreklik først på tabellen og ændre egenskaberne, så linjerne ikke er farve (usynlige). Den første widget, jeg indsatte i den øverste venstre celle, var en cool ur-widget fra clocklink.com. Under dette tilføjede jeg en vejr-widget fra Accuweather.com - en af ​​mine favoritter, fordi den viser en cool grafisk radardisplay af enhver stormende storm.

I begge tilfælde skal jeg blot klikke inde i cellen, som jeg vil indsætte widgetkode, derefter klikke på Indsæt menuen og vælge HTML. Bare indsæt widgetkoden i det vindue, der dukker op.

Du bemærker muligvis, at din widget ikke er centreret, eller den vises for langt ned fra toppen af ​​cellen. Det er let at løse i Kompozer uden kodningskendskab overhovedet. Bare højreklik på cellen, vælg tabelcelleegenskaber, og skift derefter indholdstilpasningen til det, der ser bedst ud.

For at teste dine ændringer skal du bare gemme filen på din lokale computer som en HTML-fil og derefter se filen ved hjælp af din yndlingsbrowser. Hvis du virkelig har problemer, kan du altid indsætte kode, hvis du virkelig skal. I Kompozer kan du redigere siden ved at klikke på fanen “kilde”. For eksempel var der et par tilfælde, hvor jeg bare skulle indsætte en pause
at tvinge et mellemrum mellem nogle af widgets, som jeg placerede inde i den samme celle.

Tilføjelse af tre mere af de bedste widgets, jeg fandt, jeg havde udviklet informationsdisplayet i realtid vist nedenfor. De tre seje widgets, jeg tilføjede, var Gaspriser-widget'en fra gas-cost.net, og råvare widget og aktuelle vekselkurs widgets fra 100widgets.com.

Dette er alle realtime-widgets, der viser aktuelle data fra hele verden. Nu har jeg opdateret de andre data om priser, aktiekurser og vejr, alt sammen med et enkelt blik. Men kun halvdelen af ​​websiden er fyldt, og vi har meget mere information at bygge på denne side - to flere hele kolonner med data for at være nøjagtige.

En anden virkelig cool widget, som jeg føjede til siden, var brugerens konfigurationswidget [No Longer Available] fra 100widgets.com. Dette giver dig feedback om din nuværende IP-adresse, computerinfo og Windows / browser-version. Dette er nyttigt, når du er på farten og opretter forbindelse til din side fra et hotel eller bibliotek og har brug for at kende din nuværende IP. Jeg tilføjede også det meget cool Verdens tællere og aktieindekserne fra widgetbox.com.

Et par andre nyttige widgets, der er værd at nævne til denne form for fuld-sides realtime-skærm - den første er en nedtællingswidget fra widgetbox.com. Når du konfigurerer den, giver du den en dato og en begivenhed, der skal tælles ned til, og den vises i widgeten som en tekstnedtælling mod den begivenhed (se det store display, der er vist to billeder herfra).

Og intet sci-fi-datadisplay ville være komplet uden en roteret grafik af jorden, der viser information om realtidstemperatur fra et hvilket som helst punkt på planeten, du kan lide. Du kan hente disse data fra Weather-3D widget fra Widgetbox.com.

På billedet herunder på mit fuldsidedata-dashboard, kan du se nedtællingen øverst på side (jeg indsatte den centreret foran selve tabellen), og 3d Weather kloden lige under verdensnedtællingen widget. I den sidste kolonne i tabellen tilføjede jeg nuværende DHS-trusselsniveau, sexede kurver (mere til udsmykning end noget andet - det ser fedt ud) og endelig realtidsalarmwidget fra National Hurricane Center.

Da siden endelig er afsluttet, har jeg nu adgang til det aktuelle tidspunkt, lokalt og globalt vejr, information om aktiemarkedet, aktuelle gaspriser, aktuelle orkanalarmer, nationale trusselsniveauer og naturligvis belastningen af ​​verdensdata i verdensnedtællingen widget.

Du kan finjustere denne slags skærm med alle de oplysninger, du ønsker, ved at søge efter andre informative widgets på en af ​​de store widgetwebsteder, og indsæt dem derefter i dit layout hvor du vil. Kompozers evne til let at centrere og justere celler giver dig mulighed for at få hele skærmen til at se ren og virkelig cool ud. Når du er færdig, kan du bare uploade HTML-filen til din egen webhost, så du kan få adgang til den hvor som helst i verden.

Opret dit eget informationspanel, og lad os vide, hvordan det går. Hvilke andre nyttige widgets opdagede du til information i realtid? Del dem i kommentarområdet nedenfor - jeg ville meget gerne se, hvad andre seje widgets folk fandt!

Billedkredit: Telekommunikationsgrafik via Shutterstock