Google Drive permite hospedar páginas web

Traduzido de ALT1040

Recentemente Google anunciou que permitirá a desenvolvedores web compartilhar e visualizar páginas inteiras armazenadas dentro de suas contas de Drive, o serviço de armazenamento gratuito da companhia, que até então funcionava apenas como um disco virtual. Agora qualquer pessoa pode subir arquivos de extensão HTML, JavaScript e até CSS, para que depois de seguir alguns simples passos seja possível tornar pública a página principal e navegar como uma página web funcional.

Google Drive permite alojar páginas web

Continue lendo “Google Drive permite hospedar páginas web”

10 funções do Google Chrome que provavelmente você não conhecia

Post adaptado de bitelia.com

Feliz 2013 a todos!
Depois de um pequeno descanso, vamos voltando com tudo!

Aproveitando que estou na onda do GWT (Google Web Toolkit… novidades em breve), vou compartilhar algumas dicas interessantes para se trabalhar com o browser da Google, o Chrome.

chrome

Continue lendo “10 funções do Google Chrome que provavelmente você não conhecia”

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!!!

Os Visionários da Tecnologia

Nestas duas semanas muitas coisas aconteceram no mundo da tecnologia. Tivemos mais um evento de lançamento de novos produtos da Apple, poucas semanas após o lançamento do iPhone 5. Agora para apresentar a nova linha de computadores Apple (como MacBook e iMac) e o tão comentado iPad mini. Vale lembrar que segundo consta, Steve Jobs sempre foi radicalmente contra um iPad de tamanho menor ao tradicional 10 polegadas. Pessoalmente acho interessantíssimo este lançamento, pois proporciona um maior leque de opções aos consumidores, claro sempre mantando o padrão de qualidade Apple, ponto máximo de seus produtos.

Esse aliás foi meu ponto de escolha para devolver meu tablet Motorola Xoom com Android e comprar um iPad. Pois é, eu juro que tentei usar o Android. Mas sinceramente não me pareceu intuitivo, era muito confuso. Sem falar que a versão do Android da época era a 3.1, ainda muito instável. Um dos pontos que justifica essa minha análise, por exemplo, foi que justamente comprei este tablet por ele aceitar a entrada de cartões de memória (além da memória interna do aparelho) o que era exatamente o que estava procurando, pois minha idéia era carregar no tablet as fotos tomadas com minha câmera  Qual não foi minha surpresa ao descobrir que mesmo o hardware tendo o suporte ao cartão de memória, o sistema operacional android não suportava!

Reclamações a parte, além do evento da Apple também tivemos na última semana o movimento do gigante adormecido. Chegou o tão esperado Windows 8 e com ele o Surface, primeira tentativa da história da Microsoft de desenvolvimento de seu próprio hardware. Ok, sabemos que a microsoft fabrica mouse, teclado e alguns outros periféricos. Aliás, foram alguns dos melhores mouses que já tive. Porém a mesmo nunca entrou no mercado de produção de PC´s, sempre tendo esta responsabilidade nas mãos de seus diversos parceiros. Ainda não tive a oportunidade de conhecê-lo, mas segundo alguns comentários aparentemente a Microsoft está no caminho certo.

Steve Jobs e Bill Gates

Me chamou muito a atenção a capa do caderno link de hoje do jornal O Estado de São Paulo onde falam justamente do atual momento destas duas empresas históricas, mais de 30 anos depois de serem fundadas. Com a morte de Jobs e a aposentadoria de Gates, ambas empresas tratam de seguir líderes num segmento cada vez mais competitivo (os coreanos estão chegando) e pelo menos por enquanto sinalizam ainda ter muita lenha para queimar.

Na reportagem foi citado o tão comentado encontro entre Steve Jobs e Bill Gates em 2007 na cidade de Carlsbad na Califórnia na conferência D5. Eles foram convidados para um debate onde se esperavam muitos ataques entre estes dois “concorrentes”, mas na verdade o que houve foi uma divertidíssima e histórica conversa entre dois velhos amigos universitários que criaram do nada uma nova indústria bilionária: a indústria da computação pessoal.

Deixo aqui alguns vídeos do YouTube onde podem rever a conversa entre estes homens históricos:

E para quem quer conhecer ainda um pouco mais sobre o mundo de Jobs, segue também um outro vídeo muito interessante. Trata-se da entrevista do escritor Walter Isaacson pelo programa da Tv Cultura, o Roda Viva em março deste ano. Walter Isaacson é o autor da biografia autorizada de Steve Jobs e esteve ao lado do líder da Apple nos seus últimos anos de vida.

Espero que tenham curtido o post. Um grande abraço a todos!

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>