Se você é uma pessoa ocupada que realmente não tem muito tempo para verificar as notícias todos os dias, mas você gosta de manter-se atualizado com os últimos grandes eventos, como grandes tempestades, o mercado de ações ou grandes mudanças em todo o mundo, uma exibição gráfica é muito mais eficiente.
Você provavelmente já viu exemplos de alguns corretores de ações, onde há um monitor com muitos gráficos, gráficos e outros gráficos, todos exibindo dados em tempo real. Ou talvez você possa ter visto esses displays de centro de lançamento da NASA com todos os tipos de dados importantes rolando pela tela.
Na minha opinião, essa é a melhor maneira de mostrar muitas informações em um espaço pequeno. E se você está trabalhando com duas ou três telas como eu, então você tem o espaço do monitor para ter uma tela aberta o tempo todo - onde você pode conferir o que está acontecendo em todo o mundo com apenas um olhar.
Neste artigo, vou orientá-lo em meus esforços para montar esse tipo de exibição usando ferramentas e técnicas de design da Web muito simples. Também vou compartilhar 15 dos melhores widgets de painel on-line que encontrei em toda a Internet que ajudaram a construir essa grande exibição informativa de informações mundiais.
Construindo uma exibição em tempo real dos dados mundiais
Um dos primeiros lugares para os quais eu fui a fim de construir uma exibição tão informativa é o Netvibes. Nós cobrimos o site com freqüência, como no artigo incrível de Angela sobre como usá-lo para gerenciar sua vida Como gerenciar sua vida completamente on-line usando Netvibes Como gerenciar sua vida completamente on-line usando Netvibes Leia mais.
Eu também gosto muito do Netvibes, e depois de ler o artigo de Angela, eu comecei a usá-lo para organizar links e ferramentas para cada uma das principais tarefas que eu tenho que fazer online. É bom ter tudo em um só lugar. No entanto, quando tentei usar o gadget HTML para incorporar widgets na página, percebi que ele não funciona muito bem. Você pode redimensionar a largura, mas a altura parece permanecer fixa - cortando widgets maiores.
Depois de tentar alguns outros sites - Protopage Como fazer um portfólio de seu trabalho on-line com Protopage Como fazer um portfólio de seu trabalho on-line com Protopage Leia mais foi outro que não funcionou bem. Adicionou muito espaço nas laterais dos widgets e não permitiu o redimensionamento adequado. Então, depois de passar muito tempo tentando fazer as páginas preexistentes funcionarem, decidi recorrer ao design de uma página do zero.
Eu queria propor uma solução que qualquer um pudesse fazer, independentemente da experiência de web design. Minha ferramenta de web design WYSIWYG de escolha é o Kompozer. A única desvantagem dessa abordagem é que ela usa tabelas, o que no mundo dos web designers é considerado arcaico comparado ao uso de CSS. Mas, para simplificar, vamos usar o Kompozer e colocar os widgets diretamente na página.
Aqui está como a visão de design no Kompozer parece após você ter inserido uma tabela - neste caso eu uso uma tabela 4 por 4, mas você pode fazer qualquer tamanho que quiser.
Primeiro, clique com o botão direito do mouse na tabela e altere as propriedades para que as linhas não fiquem coloridas (invisíveis). O primeiro widget que inseri na célula superior esquerda foi um widget de relógio legal da clocklink.com. De acordo com isso, adicionei um widget do tempo de Accuweather.com - um dos meus favoritos, porque mostra uma exibição de radar gráfica legal de qualquer tempestade que se aproxima.
Em cada caso, simplesmente clico dentro da célula que desejo inserir o código do widget, depois clico no menu Inserir e escolho HTML. Basta colar o código do widget na janela que aparece.
Você pode perceber que seu widget não está centrado ou aparece muito abaixo do topo da célula. Isso é fácil de corrigir no Kompozer sem nenhum conhecimento de codificação. Apenas clique com o botão direito do mouse na célula, escolha as propriedades da célula da tabela e, em seguida, altere o alinhamento do conteúdo para o que tiver melhor aparência.
Para testar suas alterações, salve o arquivo em seu computador local como um arquivo HTML e, em seguida, exiba o arquivo usando seu navegador favorito. Se você realmente está tendo problemas, você sempre pode inserir o código se realmente precisar. No Kompozer, você pode editar a página clicando na guia “fonte”. Por exemplo, houve alguns casos em que precisei inserir um intervalo
para forçar um espaço entre alguns dos widgets que eu coloquei dentro da mesma célula.
Adicionando mais três dos melhores widgets que encontrei, desenvolvi a tela informativa em tempo real mostrada abaixo. Os três widgets legais que eu adicionei foram o widget Gas Prices do gas-cost.net, e o widget de commodities e os widgets de taxas de câmbio atuais do 100widgets.com.
Estes são todos os widgets em tempo real, exibindo dados atuais de todo o mundo. Agora eu tenho até o segundo dado sobre preços, taxas de ações e clima, tudo com um único olhar. Mas apenas metade da página da web está preenchida, e temos muito mais informações para construir nesta página - mais duas colunas inteiras de dados para ser exato.
Outro widget muito legal que eu adicionei à página foi o widget de configuração do usuário de 100widgets.com. Isso lhe dá feedback sobre seu endereço IP atual, informações do computador e versão do Windows / navegador. Isso é útil quando você está em trânsito e conecta-se à sua página de um hotel ou biblioteca e precisa saber seu IP atual. Eu também adicionei os muito legais World Counters e os índices de ações do widgetbox.com.
Alguns outros widgets úteis que valem a pena mencionar para esse tipo de exibição em tempo real de página inteira - o primeiro é um widget de contagem regressiva de widgetbox.com. Ao configurá-lo, você atribui a ele uma data e um evento para fazer a contagem regressiva e ele aparece no widget como uma contagem regressiva de texto em direção a esse evento (veja a exibição grande, duas imagens abaixo).
E nenhuma exibição de dados de ficção científica estaria completa sem um gráfico girado da Terra exibindo informações de temperatura em tempo real de qualquer ponto do planeta que você goste. Você pode obter os dados do widget Weather-3D do Widgetbox.com.
Na imagem abaixo do meu painel de dados em tempo real de página inteira, você pode ver a contagem regressiva no topo da página (inseri-a centralizada antes da própria tabela) e o globo do 3d Weather logo abaixo do widget de contagem regressiva mundial. Na última coluna da tabela, adicionei o atual nível de ameaça do DHS, curvas sensuais (mais para decoração do que qualquer outra coisa - parece legal) e, finalmente, o widget de alerta em tempo real do National Hurricane Center.
Com a página finalmente concluída, agora tenho acesso ao tempo atual, clima local e global, informações do mercado de ações, preços atuais do gás, alertas de furacões atuais, níveis de ameaça nacional e, claro, as cargas de dados mundiais no widget de contagem regressiva mundial.
Você pode ajustar esse tipo de exibição com qualquer informação que desejar, pesquisando outros widgets informativos em qualquer um dos principais sites de widgets e, em seguida, inserindo-os em seu layout onde quiser. A capacidade do Kompozer de centralizar e alinhar células facilmente permitirá que você faça toda a tela parecer limpa e muito legal. Assim que estiver pronto, basta carregar o arquivo HTML no seu host para acessá-lo de qualquer lugar do mundo.
Crie seu próprio painel informativo e deixe-nos saber como é. Quais outros widgets úteis você descobriu para informações em tempo real? Compartilhá-los na área de comentários abaixo - Eu adoraria ver o que outras pessoas legais widgets encontraram!
Crédito de imagem: Gráfico de telecomunicações via Shutterstock