Se sei una persona impegnata che non ha davvero molto tempo per controllare le notizie ogni giorno, ma ti piace tenerti aggiornato con gli ultimi eventi più importanti come le tempeste, il mercato azionario o i cambiamenti più importanti in tutto il mondo, un display grafico è molto più efficiente.
Probabilmente hai visto esempi di alcuni uffici di intermediazione mobiliare 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 scorrono sullo schermo.
Secondo me, questo è il modo migliore per mostrare molte informazioni in un piccolo spazio. E se lavori con due o tre schermi come lo sono io, hai lo spazio del monitor per avere sempre un display - in cui puoi controllare cosa succede in tutto il mondo con un semplice colpo d'occhio.
In questo articolo, ti illustrerò i miei sforzi per mettere insieme questo tipo di visualizzazione utilizzando strumenti e tecniche di progettazione web molto semplici. Condividerò anche 15 dei migliori widget di dashboard online che ho trovato su Internet che hanno contribuito a creare questa grande visualizzazione informativa delle informazioni mondiali.
Costruire una visualizzazione in tempo reale dei dati del mondo
Uno dei primi posti in cui sono andato a costruire questo display informativo è Netvibes. Abbiamo coperto il sito spesso, come nel fantastico articolo di Angela su come usarlo per gestire la tua vita Come gestire la tua vita completamente online utilizzando Netvibes Come gestire la tua vita completamente online Usando Netvibes Ulteriori informazioni.
Mi piace molto anche Netvibes, e dopo aver letto l'articolo di Angela, in realtà ho iniziato a usarlo per organizzare collegamenti e strumenti per ciascuno dei principali compiti che devo fare online. È bello avere tutto in un posto. Tuttavia, quando ho provato a utilizzare il gadget HTML per incorporare i widget nella pagina, ho notato che non funziona molto bene. È possibile ridimensionare la larghezza, ma l'altezza sembra rimanere fissa, eliminando i widget più grandi.
Dopo aver provato alcuni altri siti - Protopage Come realizzare un portfolio del tuo lavoro online con Protopage Come fare un portfolio del tuo lavoro online con Protopage Read More è un altro che non ha funzionato correttamente. Aggiungeva troppo spazio ai lati dei widget e non consentiva il corretto ridimensionamento. Quindi, dopo aver passato troppo tempo a provare a far funzionare le pagine preesistenti, ho deciso di passare a progettare una pagina da zero.
Volevo trovare una soluzione che chiunque potesse fare, indipendentemente dall'esperienza di progettazione web. Il mio strumento di progettazione Web WYSIWYG è Kompozer. L'unico inconveniente di questo approccio è che utilizza le tabelle, che nel mondo dei web designer sono considerate arcaiche rispetto all'uso dei CSS. Ma per semplicità, useremo Kompozer e disponiamo i widget direttamente sulla pagina.
Ecco come la vista del design in Kompozer si prende cura di aver inserito un tavolo - in questo caso uso un tavolo 4 per 4, ma puoi renderlo di qualsiasi dimensione tu voglia.
Innanzitutto, fare clic con il tasto destro sulla tabella e modificare le proprietà in modo che le linee non siano a colori (invisibili). Il primo widget che ho inserito nella cella in alto a sinistra era un fantastico widget di clock di clocklink.com. Sotto questo, ho aggiunto un widget meteo da Accuweather.com - uno dei miei preferiti perché mostra un display radar grafico di qualsiasi tempesta in avvicinamento.
In ogni caso, faccio semplicemente clic all'interno della cella per inserire il codice del widget, quindi fare clic sul menu Inserisci e scegliere HTML. Basta incollare il codice del widget nella finestra che si apre.
Potresti notare che il tuo widget non è centrato o si trova troppo in basso rispetto alla parte superiore della cella. È facile da sistemare in Kompozer senza alcuna conoscenza di codice. Basta fare clic con il tasto destro del mouse sulla cella, selezionare le proprietà della cella della tabella e quindi modificare l'allineamento del contenuto per ottenere l'aspetto migliore.
Per testare le modifiche, è sufficiente salvare il file sul computer locale come file HTML e quindi visualizzare il file utilizzando il browser preferito. Se hai davvero problemi, puoi sempre inserire il codice se proprio devi. In Kompozer, puoi modificare la pagina facendo clic sulla scheda "fonte". Ad esempio, ci sono stati un paio di casi in cui ho dovuto inserire un'interruzione
forzare uno spazio tra alcuni dei widget che ho inserito all'interno della stessa cella.
Aggiungendo altri tre dei migliori widget che ho trovato ho sviluppato il display informativo in tempo reale mostrato di seguito. I tre fantastici widget che ho aggiunto sono stati il widget Prezzi del gas di gas-cost.net, il widget delle materie prime e i widget di cambio attuali di 100widgets.com.
Questi sono tutti widget in tempo reale, che mostrano i dati attuali da tutto il mondo. Ora ho aggiornato i secondi dati su prezzi, quotazioni e condizioni meteorologiche, il tutto con una sola occhiata. Ma solo metà della pagina web è piena, e abbiamo molte più informazioni da costruire su questa pagina - altre due intere colonne di dati per essere esatte.
Un altro widget davvero interessante che ho aggiunto alla pagina era il widget di configurazione dell'utente da 100widgets.com. Questo ti dà un feedback sul tuo attuale indirizzo IP, informazioni sul computer e la versione di Windows / browser. Ciò è utile quando sei in viaggio e ti connetti alla tua pagina da un hotel o da una biblioteca e hai bisogno di conoscere il tuo attuale IP. Ho anche aggiunto i fantastici contatori mondiali e gli indici azionari di widgetbox.com.
Un paio di altri widget utili che vale la pena menzionare per questo tipo di visualizzazione in tempo reale a piena pagina: il primo è un widget per il conto alla rovescia di widgetbox.com. Quando lo si imposta, gli si assegnano una data e un evento a cui eseguire il conto alla rovescia, e si visualizza nel widget come un conto alla rovescia del testo verso quell'evento (vedere il grande display mostrato due immagini in basso da qui).
E nessuna visualizzazione di dati alla ricerca di fantascienza sarebbe completa senza una grafica ruotata della terra che visualizza le informazioni sulla temperatura in tempo reale da qualsiasi punto del pianeta che ti piace. È possibile ottenere tali dati dal widget Meteo 3D da Widgetbox.com.
Nell'immagine qui sotto della mia dashboard di dati in tempo reale a piena pagina, puoi vedere il conto alla rovescia nella parte superiore della pagina (l'ho inserito centrato prima del tavolo stesso) e il globo di Meteo 3d proprio sotto il widget del conto alla rovescia mondiale. Nell'ultima colonna del tavolo ho aggiunto l'attuale livello di minaccia DHS, le curve sexy (più per la decorazione di qualsiasi altra cosa - sembra interessante) e infine il widget di allarme in tempo reale del National Hurricane Center.
Una volta completata la pagina, ora ho accesso all'ora corrente, al meteo locale e globale, alle informazioni sul mercato azionario, ai prezzi attuali del gas, agli attuali avvisi sugli uragani, ai livelli di minaccia nazionali e naturalmente ai carichi di dati mondiali nel widget mondiale del conto alla rovescia.
Puoi modificare questo tipo di visualizzazione con qualsiasi informazione desideri cercando altri widget informativi su uno dei principali siti di widget e inserendoli nel tuo 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 fantastico. Una volta che hai finito, puoi semplicemente caricare il file HTML sul tuo host web in modo che tu possa accedervi da qualsiasi parte del mondo.
Crea il tuo dashboard informativo e facci sapere come va. Quali altri utili widget hai scoperto per le informazioni in tempo reale? Condividili nell'area dei commenti qui sotto - Mi piacerebbe vedere cosa hanno trovato gli altri fantastici widget!
Immagine di credito: Grafica di telecomunicazioni Via Shutterstock