Annuncio pubblicitario

widget di dashboardSe sei una persona impegnata che non ha davvero molto tempo per controllare le notizie ogni giorno, ma ti piace rimanere aggiornato con gli ultimi grandi eventi come grandi tempeste, il mercato azionario o grandi cambiamenti in tutto il mondo, un display grafico è molto di più efficiente.

Probabilmente hai visto esempi di alcuni uffici di broker di borsa in cui è presente un monitor con molti grafici, grafici e altri elementi grafici che mostrano tutti i dati in tempo reale. O forse potresti aver visto quei fantastici display del centro di lancio della NASA con tutti i tipi di dati importanti che scorrevano sullo schermo.

Secondo me, è il modo migliore per mostrare molte informazioni in un piccolo spazio. E se stai lavorando con due o tre schermi come me, allora hai lo spazio monitor per avere un visualizzare sempre - dove puoi vedere cosa sta succedendo in tutto il mondo con solo un occhiata.

In questo articolo, ti guiderò attraverso i miei sforzi per mettere insieme quel tipo di display usando strumenti e tecniche di web design molto semplici. Condividerò anche 15 dei migliori widget di dashboard online che ho trovato su Internet che mi hanno aiutato a costruire questa vasta visualizzazione informativa di informazioni sul mondo.

instagram viewer

Costruire una visualizzazione in tempo reale dei dati mondiali

Uno dei primi posti in cui sono andato per costruire un display così informativo è Netvibes. Abbiamo coperto spesso il sito, come nel fantastico articolo di Angela su come usarlo per gestire la tua vita Come creare un feed di notizie reale con RSSCombina i risultati RSS con un paio di strumenti di terze parti e crea un singolo feed di notizie personalizzato che contiene solo storie legittime che ti interessano. Ti mostriamo come in questa guida passo passo. Leggi di più .

Mi piace molto anche Netvibes, e dopo aver letto l'articolo di Angela, ho iniziato a usarlo per organizzare collegamenti e strumenti per ciascuno dei principali compiti che devo svolgere online. È bello avere tutto in un unico posto. Tuttavia, quando ho provato a utilizzare il gadget HTML per incorporare widget nella pagina, ho notato che non funziona molto bene. Puoi ridimensionare la larghezza, ma l'altezza sembra rimanere fissa, tagliando i widget più grandi.

widget di dashboard

Dopo aver provato alcuni altri siti - Protopage I migliori costruttori di siti Web per creare un portafoglio online pulitoQuale costruttore di siti web gratuito è il migliore per il tuo portafoglio? Ecco i migliori costruttori di siti Web che puoi scegliere! Leggi di più era un altro che non funzionava bene. Ha aggiunto troppo spazio ai lati dei widget e non ha consentito il corretto ridimensionamento. Quindi, dopo aver passato troppo tempo a cercare di far funzionare le pagine preesistenti, ho deciso di dedicarmi alla progettazione di una pagina da zero.

Volevo trovare una soluzione che chiunque potesse fare, indipendentemente dall'esperienza di web design. Il mio strumento di progettazione web WYSIWYG preferito è Kompozer. L'unico inconveniente di questo approccio è che utilizza tabelle, che nel mondo dei web designer è considerata arcaica rispetto all'utilizzo dei CSS. Ma per semplicità, useremo Kompozer e tracceremo i widget direttamente sulla pagina.

Ecco come la vista del design in Kompozer si occupa di aver inserito una tabella: in questo caso utilizzo una tabella 4 per 4, ma puoi renderla di qualsiasi dimensione desideri.

widget meteo

Innanzitutto, fai clic con il pulsante destro del mouse sulla tabella e modifica le proprietà in modo che le linee non siano colorate (invisibili). Il primo widget che ho inserito nella cella in alto a sinistra era un fantastico widget orologio clocklink.com. Sotto quello, ho aggiunto un widget meteo da Accuweather.com - uno dei miei preferiti perché mostra un fantastico display radar grafico di qualsiasi tempesta in arrivo.

widget meteo

In ogni caso, faccio semplicemente clic all'interno della cella in cui voglio inserire il codice del widget, quindi faccio clic sul menu Inserisci e scelgo HTML. Basta incollare il codice del widget nella finestra che si apre.

widget meteo

Potresti notare che il tuo widget non è centrato o appare troppo in basso nella parte superiore della cella. È facile da risolvere in Kompozer senza alcuna conoscenza di codifica. Basta fare clic con il pulsante destro del mouse sulla cella, scegliere le proprietà della cella della tabella, quindi modificare l'allineamento del contenuto in modo che appaia meglio.

notizie widget

Per testare le modifiche, è sufficiente salvare il file sul computer locale come file HTML, quindi visualizzare il file utilizzando il browser preferito. Se riscontri davvero problemi, puoi sempre inserire il codice se necessario. In Kompozer, puoi modificare la pagina facendo clic sulla scheda "sorgente". Ad esempio, ci sono stati un paio di casi in cui ho dovuto solo inserire una pausa
per forzare uno spazio tra alcuni dei widget che ho inserito nella stessa cella.

notizie widget

Aggiungendo altri tre dei migliori widget, ho scoperto di aver sviluppato la visualizzazione informativa in tempo reale mostrata di seguito. I tre fantastici widget che ho aggiunto erano il widget Prezzi del gas di gas-cost.net, e il widget di materie prime e widget dei tassi di cambio correnti da 100widgets.com.

notizie widget

Questi sono tutti widget in tempo reale, che mostrano i dati attuali di tutto il mondo. Ora ho aggiornato i secondi dati su prezzi, tassi di borsa e meteo, il tutto con una sola occhiata. Ma solo metà della pagina web è piena e abbiamo molte più informazioni da compilare su questa pagina - altre due intere colonne di dati per l'esattezza.

Un altro widget davvero interessante che ho aggiunto alla pagina era il widget di configurazione dell'utente [Non più disponibile] da 100widgets.com. Questo ti dà feedback sul tuo attuale indirizzo IP, informazioni sul computer e versione di Windows / browser. Questo è utile quando sei in viaggio e ti connetti alla tua pagina da un hotel o da una biblioteca e devi conoscere il tuo IP attuale. Ho anche aggiunto il fantastico Contatori del mondo e gli indici azionari da widgetbox.com.

13 Widget che rendono fantastici i dati in tempo reale Visualizza netvibes10

Un paio di altri widget utili che vale la pena menzionare per questo tipo di visualizzazione in tempo reale a tutta pagina: la prima è a widget di conto alla rovescia da widgetbox.com. Quando lo configuri, gli assegni una data e un evento per il conto alla rovescia e viene visualizzato nel widget come un conto alla rovescia del testo verso quell'evento (vedi il grande display che mostra due immagini in basso da qui).

widget di dashboard

E nessuna visualizzazione di dati fantascientifici sarebbe completa senza un grafico ruotato della terra che mostra informazioni sulla temperatura in tempo reale da qualsiasi punto del pianeta che ti piace. È possibile ottenere quei dati dal Widget Meteo-3D da Widgetbox.com.

13 Widget che rendono fantastici i dati in tempo reale Visualizza netvibes12

Nell'immagine qui sotto della mia dashboard di dati in tempo reale a tutta pagina, puoi vedere il conto alla rovescia nella parte superiore del pagina (l'ho inserita centrata davanti al tavolo stesso) e il globo 3d Meteo appena sotto il conto alla rovescia del mondo aggeggio. Nell'ultima colonna della tabella ho aggiunto il livello attuale di minaccia DHS, curve sexy (più per la decorazione di ogni altra cosa - sembra bello), e infine il widget di avviso in tempo reale dal Centro nazionale degli uragani.

widget dashboard larghezza =

Con la pagina finalmente completata, ora ho accesso all'ora corrente, al meteo locale e globale, alle informazioni sul mercato azionario, prezzi del gas attuali, attuali allarmi uragano, livelli di minaccia nazionali e, naturalmente, il carico di dati mondiali nel conto alla rovescia mondiale aggeggio.

Puoi modificare questo tipo di display con qualsiasi informazione desideri cercando altri widget informativi su uno dei principali siti di widget, quindi inserendoli nel layout ovunque tu voglia. La capacità di Kompozer di centrare e allineare facilmente le celle ti consentirà di rendere l'intero display pulito e davvero interessante. Una volta terminato, puoi semplicemente caricare il file HTML sul tuo host web in modo da poter accedervi da qualsiasi parte del mondo.

Crea la tua dashboard informativa e facci sapere come va. Quali altri widget utili hai scoperto per informazioni in tempo reale? Condividili nell'area dei commenti qui sotto: mi piacerebbe vedere quali altri fantastici widget hanno trovato le persone!

Credito immagine: Grafica delle telecomunicazioni via Shutterstock

Ryan ha una laurea in ingegneria elettrica. Ha lavorato 13 anni in ingegneria dell'automazione, 5 anni in IT e ora è un ingegnere di app. Ex amministratore delegato di MakeUseOf, ha parlato a conferenze nazionali sulla visualizzazione dei dati ed è stato presentato su TV e radio nazionali.