13 widget-uri care fac un afișaj de date minuțios în timp real

Dacă sunteți o persoană ocupată care nu are prea mult timp să verifice știrile în fiecare zi, dar vă place să țineți la curent ultimele evenimente majore cum ar fi furtunile majore, piața bursieră sau schimbările majore din întreaga lume , un afișaj grafic este mult mai eficient.

Probabil că ați văzut exemple ale unor birouri de broker de stocuri, unde există un monitor cu o mulțime de diagrame, grafice și alte elemente grafice care afișează date în timp real. Sau poate ați fi văzut acele afișări minunate ale centrului de lansare NASA cu tot felul de date importante derulând pe ecran.

În opinia mea, este cel mai bun mod de a arăta o mulțime de informații într-un spațiu mic. Și dacă lucrați cu două sau trei ecrane ca mine, atunci aveți spațiul monitorului pentru a avea un afișaj tot timpul - unde puteți vedea ce se întâmplă în întreaga lume cu doar o privire.

În acest articol, vă voi face eforturi pentru a pune împreună acest tip de afișare folosind instrumente și tehnici foarte simple de design web. De asemenea, voi distribui 15 dintre cele mai bune widget-uri de tablouri de bord online pe care le-am găsit pe Internet, care au ajutat la construirea acestui afișaj informativ de informație mondial.

Construirea unui afișaj în timp real al datelor din lume

Unul dintre primele locuri în care m-am dus pentru a construi un astfel de afișaj informativ este Netvibes. Am acoperit site-ul de multe ori, cum ar fi în Angela articol minunat despre cum să-l folosească pentru a vă gestiona viața Cum să vă gestionați complet online Utilizarea Netvibes Cum să vă gestionați complet online folosind Netvibes Citiți mai multe .

Chiar îmi place Netvibes, și după ce am citit articolul lui Angela, am început să-l folosesc pentru a organiza legături și instrumente pentru fiecare dintre sarcinile majore pe care trebuie să le fac online. Este frumos să ai totul într-un singur loc. Cu toate acestea, când am încercat să folosesc gadgetul HTML pentru a încorpora widget-uri în pagină, am observat că nu funcționează foarte bine. Puteți redimensiona lățimea, dar înălțimea pare să rămână fixă ​​- tăierea unor widget-uri mai mari.

Dupa ce ati incercat cateva site-uri - Protopage Cum sa faceti un portofoliu de lucru online cu protopage Cum sa faceti un portofoliu al dvs. de lucru online cu Protopage Read More a fost un alt care nu a functionat destul de bine. A adăugat prea mult spațiu pe marginea widget-urilor și nu a permis redimensionarea corectă. Deci, după ce am petrecut prea mult timp încercând să fac pagini preexistente, am decis să mă gândesc la proiectarea unei pagini de la zero.

Am vrut să vină cu o soluție pe care oricine ar putea să o facă, indiferent de experiența de web-design. My WYSIWYG instrument de web design de alegere este Kompozer. Singurul dezavantaj al acestei abordări este acela că utilizează tabele care, în lumea designerilor web, sunt considerate arhaice în comparație cu utilizarea CSS. Dar pentru simplitate, vom folosi Kompozer și vom pune widget-urile chiar pe pagină.

Iată cum arată aspectul de design în Kompozer după ce ați introdus o masă - în acest caz folosesc un tabel de 4 până la 4, dar puteți face orice dimensiune doriți.

În primul rând, faceți clic dreapta pe masă și modificați proprietățile astfel încât liniile să nu aibă culori (invizibile). Primul widget pe care l-am introdus în celula din stânga sus a fost un widget ceas rece de la clocklink.com. Sub aceasta, am adăugat un widget vreme de la Accuweather.com - unul dintre preferatele mele pentru că arată un afișaj radar grafic răcoros al oricărei furtuni care se apropie.

În fiecare caz, trebuie doar să faceți clic în interiorul celulei pe care vreau să introduc codul widget, apoi să faceți clic pe meniul Inserare și să alegeți HTML. Doar lipiți codul widget în fereastra care apare.

Este posibil să observați că widget-ul dvs. nu este centralizat sau se afișează prea sus în jos de partea de sus a celulei. Acest lucru este ușor de rezolvat în Kompozer fără nici o cunoaștere de codificare la toate. Faceți clic dreapta pe celulă, alegeți proprietățile celulei tablei și apoi modificați alinierea conținutului la ceea ce arata cel mai bine.

Pentru a testa modificările, salvați fișierul pe computerul local ca fișier HTML și apoi vizualizați fișierul utilizând browserul dvs. preferat. Dacă aveți cu adevărat probleme, puteți introduce întotdeauna cod dacă trebuie într-adevăr. În Kompozer, puteți edita pagina făcând clic pe “sursă” tab. De exemplu, au existat câteva cazuri în care tocmai am introdus o pauză
pentru a forța un spațiu între unele dintre widget-urile pe care le-am plasat în interiorul aceleiași celule.

Adăugând încă trei dintre cele mai bune widget-uri pe care le-am găsit, am dezvoltat afișarea informativă în timp real prezentată mai jos. Cele trei widget-uri răcoritoare pe care le-am adăugat au fost widget-urile despre prețurile la gaze de la gas-cost.net, widget-urile de mărfuri și widget-urile de curs valutar de la 100widgets.com.

Acestea sunt widget-uri în timp real, care afișează date curente din întreaga lume. Acum am ajuns la cele de-a doua date privind prețurile, ratele de stoc și vremea, toate cu o singură privire. Dar numai jumătate din pagina web este umplută și avem mai multe informații pe care să le construim pe această pagină - încă două coloane întregi de date trebuie să fie exacte.

Un alt widget foarte cool pe care l-am adăugat la pagină a fost widget-ul de configurare al utilizatorului [No More Available] de la 100widgets.com. Acest lucru vă oferă feedback cu privire la adresa IP curentă, informațiile despre computer și versiunea Windows / browser. Acest lucru este util atunci când vă aflați pe drum și vă conectați la pagina dvs. dintr-un hotel sau bibliotecă și trebuie să cunoașteți adresa IP actuală. Am adăugat, de asemenea, numeroasele Counter-uri Mondiale și indici bursieri de la widgetbox.com.

Câteva alte widget-uri utile care merită menționate pentru acest tip de afișare în timp real în întreaga pagină - primul este un widget cu numărătoare inversă de la widgetbox.com. Când îl configurați, îi dați o dată și un eveniment la care să numărați și se afișează în widget ca un număr de inversare a textului spre acel eveniment (vedeți afișajul mare afișat două imagini de aici).

Și nici un afișaj de date sci-fi nu ar fi completat fără o grafică rotativă a pământului care să afișeze informații despre temperatura în timp real din orice punct de pe planetă care vă place. Puteți obține aceste date din widgetul Weather-3D de la Widgetbox.com.

În imaginea de mai jos a tabloului de bord de date în timp real, puteți vedea numărătoarea inversă chiar în partea de sus a paginii (am introdus-o centrat înaintea mesei în sine) și globul meteorologic 3D chiar sub widget-ul inversat în lume. În ultima coloană a tabelului am adăugat nivelul actual de amenințare DHS, curbele sexy (mai mult pentru decorare decât orice altceva - se pare cool) și, în final, widgetul de alertă în timp real din Centrul Național de uragan.

Cu pagina finalizată, am acum acces la ora curentă, vremea locală și globală, informații despre piața de valori, prețurile curente ale gazului, alertele actuale ale uraganului, nivelurile naționale de amenințare și, desigur, încărcăturile datelor mondiale din widget-ul inversat în lume.

Puteți personaliza acest tip de afișaj cu orice informație doriți, căutând alte widget-uri informative pe oricare dintre site-urile widget majore și apoi inserându-le în aspectul dvs. ori de câte ori doriți. Abilitatea lui Kompozer de a centra cu ușurință și de a alinia celulele vă va permite să faceți ca întregul ecran să pară curat și foarte cool. Odată ce ați terminat, puteți să încărcați fișierul HTML în propria dvs. gazdă web, astfel încât să îl puteți accesa oriunde în lume.

Creați propriul tablou de bord informațional și spuneți-ne cum merge. Ce alte widget-uri utile ați descoperit pentru informații în timp real? Împărțiți-le în zona de comentarii de mai jos - Mi-ar plăcea să văd ce alte widget-uri interesante au găsit!

Credit de imagine: Telecomunicații grafice prin Shutterstock