Um excelente gráfico, desenvolvido em parceria pela Telefonica e Designsoap, onde podemos ver alguns dos principais benefícios do HTML5, entender como cresceu em popularidade e entender até onde pretendem chegar!
Aprenda HTML5 e CSS3 com Thimble, o editor de Mozilla
Para quem acompanha o interessando mundo da famosa raposa vermelha (tudo bem, sabemos que na verdade se trata de um panda!), deve saber que o sistema operacional baseado em HTML da Mozilla está por chegar. Inclusive está disponível uma versão para testes (falaremos disso num próximo post). Em meio a várias novidades, Mozilla lançou oficialmente Thimble, seu novo editor web. Ele funciona de forma muito parecida a algumas outras plataformas de aprendizagem que já mostramos aqui, porém com alguns detalhes interessantes.
Trata-se de um editor web com o objetivo de tornar muito fácil a tarefa de criar uma página web, inclusive para aqueles sem experiência como desenvolvedor. Toda a codificação é feita diretamente no browser, onde temos a tela dividida em duas partes. Do lado esquerdo você pode inserir e alterar o código web, e do lado direito as alterações são aplicadas em tempo real. O mais interessante é que caso digitemos algum código errado, Thimble nos avisa, indicando qual é nosso erro.
Outro diferencial é a capacidade de após criar seu código, poder publicá-lo com apenas um click. Simples assim!!!
Por fim existem vários exercícios de páginas exemplos em Thimble para que qualquer pessoa possa aprender os conceitos do desenvolvimento web com HTML5 e CSS3 (claro, alguns podem querer usar o Google Translator).
Vale a pena ter essa super ferramenta na sua barra de atalhos do browser e gastar algumas horinhas navegando pelas páginas de Thimble. Bom HTML!!!
Utilizando o Google Charts – Parte 3: Gauges
Seguindo com nosso estudo da API de gráficos do Google, neste post vou demonstrar como utilizar um componente utilizado por 10 entre 10 desenvolvedores corporativos que trabalham com dashboard’s, o Gauge. Trata-se daqueles relógios, ou velocímetros, que server para criar indicadores de acompanhamento de metas ou indicadores que necessitam estar dentro de limites de controles.
São principalmente muito úteis na criação de painéis, pois fornecem diversas informações sobre um mesmo elemento, e mais do que isso, são visualmente muito bonitos e impactantes. Portanto se você também quer impressionar seu chefe, mãos a obra.
O primeiro passo é carregar o pacote ‘gauge‘, correspondente aos gráficos do tipo Gauge.
google.load('visualization', '1', {packages:['gauge']});
O seguinte passo é a definição dos dados do gráfico. Este tipo de gráfico possui duas informações básicas: O label, ou texto do gráfico e o valor do gráfico, que posicionará a ‘agulha’ do mesmo. Portanto o DataTable para este tipo de gráfico deve possuir apenas duas colunas, sendo a primeira o Label, e a segunda os Valores. É possível criar em um único gráfico, diversos ‘velocímetros’, criando portanto diversos gauges sobre o mesmo componente chart. Para isso cada linha do DataTable representará um gauge diferente.
var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]);
No caso acima, serão criados três Gauges, um exibindo a informação de Memória, o segundo CPU e o último Rede.
O último passo é a definição dos ranges (ou faixas) dos gráficos, e caso necessário, as faixas de cores do gauge.
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
minorTicks: 5
};
No exemplo acima além das opções de altura e largura do gráfico, também é possível definir as faixas de valores para cada cor do gráfico, além do valor dos marcadores intermediários do mostrador dos Gauges.
Após as definições acima, basta apenas instanciar um novo componente chart e passar como parâmetro as informações de DataTable e options.
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
Pronto! Nosso Gauge já está funcional!
Observação: O componente chart permite apenas um objeto de customização options. Portanto só é possível definir um valor para cada faixa de cor dos gráficos. Sendo assim se você necessita Gauges com distintos valores de faixas, será necessário criar distintos componentes chart e inserir cada um em uma respectiva <div>.
Abaixo o código completo do nosso exemplo. Não deixem de avisar caso tenham alguma dúvida. Abraços!
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
Utilizando o Google Charts – Parte 2: Múltiplas séries e gráficos combinados
Dando continuidade ao uso do componente Google Charts vou abordar neste post dois tópicos: Como utilizar várias séries para exibir distintos valores no mesmo período e como combinar diferentes tipos de gráficos de uma só vez.
A opção de criar um gráfico com múltiplas séries é muito útil quando existe a necessidade de exibir mais de um valor para um mesmo período, por exemplo, a quantidade de vendas de diferentes produtos em cada mês ou a evolução nas pesquisas eleitorais de cada candidato semana a semana.
Para isso não existe a necessidade de realizar nenhuma alteração no código que já vimos no primeiro post. Apenas alteramos a fonte de dados do gráfico, no nosso caso o DataTable. Conforme explicado no post anterior, a primeira coluna do DataTable representa normalmente os períodos ou valores descritivos do gráfico, como por exemplo os meses de venda. As colunas seguintes representam os valores do gráfico, como a quantidade de produtos vendidos, sendo que cada coluna do DataTable criará uma nova série no gráfico.
Sendo assim um DataTable para um gráfico com múltiplas séries teria a seguinte estrutura:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Geladeira');
data.addColumn('number', 'Fogão');
data.addColumn('number', 'Microondas');
data.addColumn('number', 'Cafeteira');
data.addRows([
['Norte', 4, 6, 1, 1],
['Nordeste', 8, 7, 5, 2],
['Sul', 5, 7, 5, 4],
['Sudeste', 8, 6, 7, 6],
['Centro-Oeste', 6, 7, 3, 4]
]);
Abaixo o resultado obtido:
Para combinar diferentes tipos de gráficos, não utilizaremos a classe específica de cada tipo para inicializar o gráfico, mas sim a classe ComboChart, que nos permite realizar esta combinação.
Esta classe permite que seja definido o tipo de gráfico para cada série do DataTable, entre os seguintes tipos: line, area, bars, candlesticks and stepped area. Para configurar o tipo de gráfico da série se utiliza a propriedade seriesType e a propriedade series para especificar as propriedades de cada série individualmente.
Utilizando o mesmo DataTable acima, vamos acrescentar uma nova série chamadas Meta de Vendas:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Geladeira');
data.addColumn('number', 'Fogão');
data.addColumn('number', 'Microondas');
data.addColumn('number', 'Cafeteira');
data.addColumn('number', 'Meta de Vendas');
data.addRows([
['Norte', 4, 6, 1, 1, 4],
['Nordeste', 8, 7, 5, 2, 5],
['Sul', 5, 7, 5, 4, 5],
['Sudeste', 8, 6, 7, 6, 7],
['Centro-Oeste', 6, 7, 3, 4, 4]
]);
Em seguida se altera as opções de customização do gráfico para definir o tipo de cada série. Na propriedade seriesType vamos configurar como sendo “bars”, o que definiria que todas as séries padrões do gráfico serão do tipo barra, e na propriedade series vamos definir que a série de Metas de Vendas será do tipo “line”. Esta configuração é realizada através do número do índice da série dentro do gráfico, iniciando a contagem em zero. Neste caso o índice da série de Meta é 4.
var options = {
'legend':'right',
'title':'Vendas Por Região',
'is3D':true,
'width':700,
'height':400,
seriesType: "bars",
series: {4: {type: "line"}}
};
Por último alteramos a classe instanciada para o tipo ComboChart.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
Abaixo o resultado final.
Espero que tenham gostado. Não esqueçam de se divertirem com o Google Playgound!
Abaixo o código completo do exemplo.
<html>
<head>
<!-- Carregando a API AJAX -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Carregando a API Visualization e os pacotes de gráficos
google.load('visualization', '1.0', {'packages':['corechart']});
// Configurando o método que será executado quando a API for carregada
google.setOnLoadCallback(drawChart);
// Método onde será criado o DataTable,
// configurado e inicializado o gráfico.
function drawChart() {
// Criando o DataTable
var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Geladeira');
data.addColumn('number', 'Fogão');
data.addColumn('number', 'Microondas');
data.addColumn('number', 'Cafeteira');
data.addColumn('number', 'Meta de Vendas');
data.addRows([
['Norte', 4, 6, 1, 1, 4],
['Nordeste', 8, 7, 5, 2, 5],
['Sul', 5, 7, 5, 4, 5],
['Sudeste', 8, 6, 7, 6, 7],
['Centro-Oeste', 6, 7, 3, 4, 4]
]);
// Opções de customização
var options = {
'legend':'right',
'title':'Vendas Por Região',
'is3D':true,
'width':700,
'height':400,
seriesType: "bars",
series: {4: {type: "line"}}
};
// Instanciando e desenhando o gráfico, passando algunas opções
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- Div onde será criado o gráfico -->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
Aplicações web mobile com gráficos em JavaScript com API do Google
Após a vitória do HTML5 na sua batalha contra o Adobe Flash e do funeral do nosso amigo Adobe Flex estive numa constante busca por boas ferramentas para desenvolvimento web, principalmente algo que nos traga a agilidade e produtividade que tínhamos com o Flex. Acredito que nem preciso citar que na atividade de criar gráficos o Flex era um lutador imbatível.
Mesmo com todas suas qualidades, o Flex ainda era dente de leite na categoria web mobile, que foi justamente uma das minhas últimas necessidades. Já a algum tempo tinha engavetado o projeto de criar uma versão mobile para nosso sistema e esta história de HTML5 acabou despertando a chama apagada.
Após comprar os livros “HTML5 – A linguagem de marcação que revolucionou a web” e principalmente “jQuery Mobile” começamos com nosso projeto. A princípio queria um desenvolvimento nativo. Até comecei a estudar o iOS, fiz um curso rápido de Android, mas quando o Windows Phone chegou forte percebi que seria muito trabalho pra uma equipe tão pequena aprender tantas linguagens. Então a decisão foi uma aplicação web, multiplataforma, que poderia atender todas nossas necessidades, visto que nosso sistema é basicamente um dashboard.
Nos surpreendemos com o jQuery Mobile, uma linguagem extremamente simples e poderosa. Sem falar do Codiqa, uma ferramenta fantástica para criar aplicações jQuery mobile com o nosso querido Drag & Drop.
Após definir nossa nova linguagem, veio o principal problema: “Qual componente usaríamos para criar os gráficos?” (aceito sugestões de possíveis componentes). Após um período de pesquisas encontramos alguns componentes gratuitos em javascript mas que possuiam poucas funcionalidades, encontramos alguns pagos porém não tínhamos orçamento para isso, e finalmente chegamos até o bom e velho Google Developers e descobrimos o Google Chart Tools API. Trata-se de uma API executada online que permite criar diversos tipos de gráficos, desde gráficos de Área, Barras, Linhas, até Gauges, Tabelas, Geográficos e Treemap.
Sua utilização é bastante simples. Basta incluir na sua página uma chamada ao arquivo javascript da página do google, criar seu conjunto de dados e executar os métodos correspondentes ao tipo de gráfico desejado, informando em qual div deverá ser criado o componente.
Os gráficos possuem diversas propriedades de customização e a documentação é bastante completa, o que ajuda em muito o trabalho. Porém sem dúvida nenhuma o que mais ajuda no desenvolvimento é o Google Code Playground, onde podemos simular e testar diversos componentes do Google realizando inclusive debug.
Nossa preocupação era apenas que assim como a API do Google Maps, esta também tivesse algum tipo de restrição como por exemplo na quantidade máxima diária de requisições. Porém verifiquei que este limite não existe, entretanto o Google se reserva o direito de bloquear o serviço em caso de uso indevido e abusivo. Bom, esperemos não ter problemas não é mesmo?
Posso afirmar que tem sido muito fácil utilizar estas ferramentas e nosso sistema está ficando ótimo. Já utilizamos gauges, gráficos de linha, área e colunas e até agora não tivemos nenhum problema quanto a desempenho.
Nos próximos post´s explicarei com maiores detalhes como utilizar a API e explicarei algumas customizações que aplicamos para conseguir alguns gráficos mais específicos.
Quarta agitada na Campus 2012
A semana já vai chegando em sua metade, mas parece que a energia da galera está longe de acabar. O dia mal começava e todos já estavam a mil, como se estivesse esvaziado as máquinas de energético da arena.
No começo da manhã decidi acompanhar a apresentação da microsoft do seu sistema Azure, projeto que consiste em um sistema operacional para gerenciar a nuvem, tecnologia que está na crista da onda. É definitivamente um produto extremamente importante, ainda mais se utilizado sob o uso da plataforma de desenvolvimento da microsoft. Porém um ponto que me chamou muito a atenção nesta apresentação foi quando mostraram a estrutura de datacenters da microsoft, que possui 3 grandes núcleos: América do Norte, Europa e Ásia. Apresentaram a estrutura utilizada pela empresa e mostraram fotos do que é chamado hoje de Computação por Container. Caso necessitem ampliar a capacidade dos seus datacenters, nada mais de ficar instalando fileiras e fileiras de servidores. Eles compram logo um container completo. Dentro destes containers estão todos os novos servidores e só precisam conectar 3 ítens ao container: energia, rede e água para resfriamento. Fantástico!
Em seguida foi a vez do painel sobre aplicativos para dispositivos móveis voltados aos cidadãos. Entre eles foi mostrado o Tarifa de Taxi para cálculo da tarifa em diversas cidades brasileiras, o app Paprika para realidade aumentada, My Fun City para engajamento social e por fim Rio App para promover a criação de aplicativos para ajudar as pessoas do Rio de janeiro utilizando bases de dados disponibilizados pelos orgãos públicos.
A palestra principal da tarde contou com a participação do vice presidente de negócios do SoundCloud, plataforma de rede social que permite o compartilhamento de áudio. Mostrou como o ser humano se relaciona com os diversos sons e como a combinação dos mesmos pode produzir diversos sentimentos que apenas imagens ou textos isolados não alcançariam.
Após a pausa para carregar as baterias acompanhei a palestra sobre metodologias de desenvolvimento ágil com foco no Team Foundation da microsoft. Foi conduzida por dois representantes da 2PC Brasil e mostrou uma incrível sincronia entre eles, apresentando os produtos, animando a platéias e demonstrando em tempo real. Ficou muito claro o poder de desenvolvimento quanto a produtividade dos pacotes da gigante dos sistemas operacionais.
Mais a tarde rolou uma palestra um pouco mais técnica, sobre a estrutura dos bancos de dados com foco no MySQL e como bancos relacionais e não relacionais armazenem e recuperam seus dados e como o programador deve olhar para isso no momento de desenvolver seus produtos.
Outra vez no palco agora com uma participação mais do que especial. Neil Harbisson foi considerado legalmente o primeiro Cyborg da humanidade, sendo considerada sua câmera para ver as cores como um membro do seu corpo. Neil nasceu com uma doença que o impede de ver as cores. Após muito desenvolvimento criaram um camera que converte as cores em freqüências audíveis que são transmitidas para seus ouvidos através dos ossos do seu crânio. Sua nomeação de cyborg lhe foi concedida quando concluíram que não se tratava apenas de um dispositivo mas sim uma extensão de seus membros uma vez que seu cérebro já interpretava as informações de som como parte de seus sentidos. Hoje ele coordena uma fundação que auxilia outras pessoas com necessidades semelhantes a melhorarem suas vidas.
A noite foi dedicada à criança do futuro: HTML5. Primeiramente um painel com os principais nomes no tema para um bate papo sobre o futuro da tecnologia web. A conversa entre outras pessoas contou com a participação de Chris Hofmann, um dos grandes colaboradores do já falecido Netscape e hoje do Mozilla Firefox. Na seqüência o mesmo realizou uma apresentação do HTML5 na prática, mostrando as principais funcionalidades desse que está se tornando um novo padrão para desenvolvimento. entre muitas perguntas que foram feitas se falou em num futuro não tão distante, o browser substituir o sistema operacional, principalmente nos dispositivos móveis. Entretanto para alcançar este nível ainda falta um longo caminho, que deve passar primeiramente na padronização das propriedades e comandos de todos os dispositivos existentes.
O que para uns parecia o final do dia, para outros significava apenas o começo da noite. Passava da meia noite e a agitação ainda era grande da arena. Dezenas de campuseiros vestidos de pijama faziam a festa. Criavam passeatas, carregavam cadeiras, tocavam cornetas. A festa era enorme. Jogos de tabuleiros davam lugar aos computadores e num dos palcos o animador da noite comandava uma homenagem ao grande cantor Wando, falecido nesta semana. E é assim que as coisas acontecem na Campus.
Aqui um pequeno vídeo da festa rolando solta na campus!
(emilioParme){} 