5 formas de ganhar experiência profissional sem um trabalho

Traduzido de ALT1040
Texto de Pepe Flores

Parece contraditório, eu sei, mas é possível. Para muitos jovens que saltam ao mercado de trabalho, a experiência é um dos itens que muitas vezes dificultam a sua entrada em novos trabalhos. Não apenas é um problema para quem busca ser contratado por uma empresa; para os trabalhadores autônomos, também é um inconveniente não ter um portfólio de clientes. Entretanto, há muitas maneiras de adquirir esta valiosa experiência sem necessidade de ter um trabalho de meio tempo ou ser estagiário em alguma companhia. Aqui estão apresentadas cinco maneiras de fazê-lo:

1. Ofereça seu trabalho pro bono

A expressão latina pro bono público significa “pelo bem público”. É uma forma para designar os trabalhos que são feitos de forma voluntária e sem esperar remuneração. São muito comuns na área jurídica, sobre tudo nos Estados Unidos, oned os advogados devem cumprir pelo menos 50 horas de trabalho pro bono. Se usa, sobre tudo, em disputas de ordem público ou para ajudar a pessoas que não tem recursos suficientes para pagar honorários.

No caso de outros ofícios e profissões, o trabalho pro bono não apenas apoia a quem necessita, senão também te dão uma valiosa experiência e te ajudam a fazer redes de contatos. Centenas de organizações não governamentais necessitam de uma página web, um aplicativo móvel, uma campanha publicitária, um redesenho de imagem, um evento de arrecadação, entre outras carências. é uma forma útil de fazer uma bom portfólio, de ajudar a alguém mais, e muitas vezes, se envolve o suficiente no projeto, que te abre as portas a mais trabalhos similares.

2. Participe de uma maratona

Não me refiro as maratonas tradicionais, mas as que pões à prova suas habilidades. Para o pessoal de TI, os hackatons são uma forma muito útil de fazer contatos, aprender mais e criar novos projetos. Estes eventos te dão a oportunidade de pensar em soluções para problemas reais, algo que em praticamente qualquer área profissional (e da vida cotidiana), será de muita utilidade para você. O mesmo encontra um par de pessoas interessadas em temas similares aos seus e criam um início de algo maior.

Outra maratona que não deveria perder de vista são os editatones de Wikipedia. No México, Wikimedia tem preparado um por mês. Se o que você gosta é escrever, é uma forma excelente de refinar seu estilo e colaborar com a comunidade. Tem espírito empreendedor? Então busque um Startup Weekend ou um evento similar para se reunir com mais gente para planejar uma empresa nova. Muitas vezes (a maioria), apenas ficam em esboços, mas isso pode te ajudar a esclarecer o que é o que quer fazer mais adiante e ir se especializando.

3. Ofereça (e faça) cursos

Estou certo que tem alguma habilidade que te diferencia ou algo que sabe fazer com muita facilidade ou maestria. Aproveite e ofereça um curso. Muitas vezes, as cidades tem espaços culturais que te permitem criar oficinas gratuitas – ou se acha que pode cobrar, tente – . Sempre terão pessoas dispostas a aprender novas habilidades. Estes cursos te ajudarão a melhorar sua facilidade de palavra, sua interação social e, além disso, será muito bem visto no seu currículo.

O mesmo se aplica no outro lado. Se tem o tempo de fazê-lo, inscreva-se a um curso de algo que te interessa. As habilidades que adquira serão úteis quando sair para o mercado de trabalho; e muitas vezes, farão a diferença. Tenho um amigo ilustrador que, graças a um lugar onde colaborou, aprendeu muitas técnicas de animação. Hoje é trabalhador autônomo e não lhe falta trabalho, além de que cobra muito bem por seu trabalho devido a isso.

4. Una-se a uma associação

Se está na universidade, corra para se unir a alguma associação estudantil ou grupo universitário. Pode ser crucial no seu futuro. Por exemplo, quando eu ia pra universidade, formei uma associação de rádio. Durante três ou quatro anos participei, em um terreno amador; porém, foi suficiente para que, ao entrar, minha experiência fosse levada em consideração para trabalhar como locutor. Estes grupos te dão a oportunidade de fazer muitas coisas, que resultam em experiência valiosa para o mundo real.

Se já está fora, tente com uma organização não governamental ou uma associação civil. Isto sim: leve em consideração o tempo que tem disponível, pois muitas vezes necessitarão aplicar bastante esforço. Ainda assim, formar parte de estes organismos te darão a chance de influenciar em temas públicos, e por sua vez obterá experiência de campo que poderá aplicar em outro lugar, ou, se você se apaixonar por esse trabalho, continuar por esse caminho.

5. Participar em um concurso

Parece ser mais difícil do que é, na verdade. Se você mergulhar um pouco a buscar pro inscrições, perceberá que há dezenas de concursos onde pode participar. Quem sabe ache que não tem muita oportunidade perante a quantidade de competidores, mas a verdade é que não é tanta gente que entra, o que aumenta suas possibilidades. Porém, não se decepcione se não ganhar; o importante é tentar para ir melhorando. O mesmo com as competições: podem dar muita experiência e uma grande bagagem.

Além disso, entrar em concursos te obriga a criar material inédito, o qual pode utilizar depois como uma amostra no caso de que deve ensinar o que sabe fazer. Em algumas situações, receberá um certificado de participação; e no melhor dos casos, conseguirá a satisfação de um prêmio, e de sobra, uma estrela a mais no seu currículo. Tudo conta.

 

 

 

 

 

Telenor se une a Telefonica em BlueVia e aos pagamentos integrados

Traduzido de ALT1040.

Texto de Carlos Rebato

BlueVia é uma das iniciativas mais interessantes que Telefonica tem apresentado no campo das aplicações móveis. Isto, unido ao seu sistema de pagamento integrado perante o qual o usuário pode pagar as aplicações de maneira transparente com sua fatura, são duas vias para facilitar aos desenvolvedores gerar entradas mediante o uso de APIs. Agora, a companhia acaba de anunciar que Telenor, o gigante das telecomunicações norueguês, acaba de se somar ao projeto.

 

O acordo aumenta exponencialmente as possibilidades de BlueVia e faz que esteja disponível para um número muito maior de usuários. BlueVia apresenta várias APIs, entre as principais se destacam: Payment API, que permite como mencionávamos carregar qualquer tipo de custo na fatura (com a consequente despreocupação por parte do cliente de ter que proporcionar dados extras); SMS API, que permite enviar mensagens aos usuários ou recebê-las por parte dos mesmos; MMS, similar mas com este protocolo, e User Context (Customer Info API), que permite conhecer dados do usuário como conexão e tipo de dispositivo que está usando.

Inicialmente a união de Telenor a BlueVia se concentrará na Paymente API, permitindo a desenvolvedores que suas aplicações e serviços funcionem sobre a infraestrutura de BlueVia enquanto compartem as entradas geradas. Ainda que esta seja a intenção principal no momento, ambas companhias não descartam que no futuro sejam lançadas novas APIs dirigidas a outras áreas de mercado.

Enquanto se desenvolvem outras iniciativas como Firefox OS, que apontam a mercados emergentes com pouca penetração no mercado de aplicações e onde o feito de ter uma base de dados com cartão de crédito é fundamental. Assim, perante a união entre Movistar e BlueVia se resolva este problema, apresente também em uma escala maior como em Google Play, onde a porcentagem de entradas em aplicações de pagamento é muito baixa.

As intenções de Telefonica com BlueVia fica claro então que vão muito mais além do mercado internacional da companhia, senão que converge dentro de uma visão muito mais global. Que Telenor suba ao carro é sem dúvida um grande passo, veremos se dará seus frutos.

Melhorias no tratamento de Exceptions em Java 7

Post traduzido e adaptado do Forum da Oracle.
Texto original de Manfred Riem.

Saiba como aproveitar melhor o tratamento de exceções, uma de muitas mudanças úteis encontradas no Project Coin, em Java SE 7.

O Project Coin é um dos projetos que foram desenvolvidos para a implementação do Java 7. A ideia do projeto era adicionar pequenas mudanças na linguagem, sem a necessidade de depender de outros projetos do java 7, e sem forçar os desenvolvedores a aderirem à nova sintaxe.

Algumas das melhorias implementadas pelo Project Coin são:

  • String no uso de Switch
  • Melhorias na escrita de literais do tipo Integral (byte, short, int e long)
  • Multiplos Catch em Exception, tratados aqui
  • Definição de tipo melhorada para criação de instâncias genéricas (“diamond”)
  • Try-com-recursos, tratados aqui
  • Invocação simplificada do método varargs

Exceções com Multi-Catch

Exceções com Multi-Catch foram adicionadas ao Java SE 7 para mais fácil e mais conciso a captura de exceções. Veja abaixo como migrar o seu código de manipulação de exceções de um código pré-Java SE 7 para um código Java SE 7.

Exemplo 1:

public class ExampleExceptionHandling
{
   public static void main( String[] args )
   {
   	try {
   		URL url = new URL("http://www.yoursimpledate.server/");
   		BufferedReader reader = new
				BufferedReader(newInputStreamReader(url.openStream()));
   		String line = reader.readLine();
   		SimpleDateFormat format = new SimpleDateFormat("MM/DD/YY");
   		Date date = format.parse(line);
   	}
   	catch(ParseException exception) {
   		// Capturando problemas de conversão de URL.
   	}
   	catch(IOException exception) {
   		// Capturando problemas de I/O.
   	}
   	catch(ParseException exception) {
   		// Capturando problemas de conversão de datas.
   	}
   }
}

No passado, se você quisesse ter a mesma lógica para tratar dois ou três casos de Exception, como por exemplo ParseException e IOException, você tinha que copiar e colar o mesmo código em ambos os blocos Catch. Um programador inexperiente ou preguiçoso poderia pensar que estaria tudo bem fazer o seguinte:

Exemplo 2:

public class ExampleExceptionHandlingLazy
{
   public static void main( String[] args )
   {
   	try {
   		URL url = new URL("http://www.yoursimpledate.server/");
   		BufferedReader reader = new
				BufferedReader(new InputStreamReader(url.openStream()));
   		String line = reader.readLine();
   		SimpleDateFormat format = new SimpleDateFormat("MM/DD/YY");
   		Date date = format.parse(line);
   	}
   	catch(Exception exception) {
   		// Sou um programador inexperiente ou preguiçoso.
   	}
   }
}

O maior problema com o código do Exemplo 2 é que ele poderia apresentar efeitos colaterias indesejados. Qualquer código no bloco try pode lançar uma exceção que seria engolida com uma cláusula catch (Exception). Se uma exceção que não é um ParseException ou IOException for lançada (por exemplo, um SecurityException), o código vai pegá-lo, mas o usuário pode não ficar ciente do que realmente aconteceu. Absorver uma exceção como esta, faz com que o código fique difícil de debugar.

A fim de facilitar o trabalho do programador, Java SE 7 agora inclui uma declaração multi-catch. Isto permite que o programador combine uma clausula catch em um simples bloco de código sem a necessidade de usar uma perigosa cláusula catch-all ou copiar o mesmo código entre vários blocos.

Exemplo 3:

public class ExampleExceptionHandlingNew
{
   public static void main( String[] args )
   {
   	try {
   		URL url = new URL("http://www.yoursimpledate.server/");
   		BufferedReader reader = new BufferedReader(
   			new InputStreamReader(url.openStream()));
   		String line = reader.readLine();
   		SimpleDateFormat format = new SimpleDateFormat("MM/DD/YY");
   		Date date = format.parse(line);
   	}
   	catch(ParseException | IOException exception) {
   		// Trate seus problemas aqui.
   	}
   }
}

O exemplo 3 mostra como combinar adequadamente as duas declarações em um bloco catch. Observe a sintaxe para a cláusula catch (ParseException | IOException). Esta cláusula catch vai pegar tanto ParseException e IOException.

Então, se você quer agora compartilhar o mesmo código de captura de exceção para duas distintas exceções, você pode usar a sintaxe “Pipe”: (ExceptionType | … | ExceptionType variavle).

Relançar Exceptions

Ao fazer o tratamento de exceções, há momentos em que você quer re-lançar uma exceção que esteja tratando. Um programador inexperiente pode pensar em fazer o seguinte código:

Exemplo 4:

public class ExampleExceptionRethrowInvalid
{
   public static void demoRethrow()throws IOException {
   	try {
 		// Forçando uma IOException aqui como um exemplo,
   		// normalmente algum código começa aqui.
		throw new IOException(“Error”);
   	}
   	catch(Exception exception) {
  		/*
   		 * faça alguma tratativa e então relance a exception.
   		 */
   		throw exception;
   	}
   }

   public static void main( String[] args )
   {
   	try {
   		demoRethrow();
  		}
   	catch(IOException exception) {
   	System.err.println(exception.getMessage());
   	}
   }
}

Mas o compilador não irá compilar o código no Exemplo 4. Exemplo 5 mostra uma maneira de lidar com a exceção e, em seguida, “relançar” ele:

Exemplo 5:

public class ExampleExceptionRethrowOld
{
   public static demoRethrow() {
   	try {
   		throw new IOException("Error");
   	}
   	catch(IOException exception) {
   		/*
   	 	 * Do some handling and then rethrow.
   	 	 */
   		throw new RuntimeException(exception);
   	}
   }

   public static void main( String[] args )
   {
   	try {
   		demoRethrow();
   	}
   	catch(RuntimeException exception) {
   	System.err.println(exception.getCause().getMessage());
   	}
   }
}

O problema com o Exemplo 5 é que não está realmente relançando a excepção original. O código está envolvendo a exceção com uma outra exceção, o que significa que o código seguinte precisa estar ciente de que a exceção foi envolvida. Assim, para tornar possível a captura efetiva da exceção original, uma mudança foi necessária em Java SE (mostrado no exemplo 6).

Exemplo 6:

public class ExampleExceptionRethrowSE7
{
   public static demoRethrow() throws IOException {
   	try {
   		throw new IOException("Error");
   	}
   	catch(Exception exception) {
   		/*
   		 * Do some handling and then rethrow.
   		 */
   		throw exception;
   	}
   }

   public static void main( String[] args )
   {
   	try {
   		demoRethrow();
   	}
   	catch(IOException exception) {
   	System.err.println(exception.getMessage());
   	}
   }
}

Try-Com-Recursos

Você deve ter notado que há um problema com o Exemplo 1 (que é por isso que você nunca deve usar o código do exemplo, em um ambiente de produção sem saber o que ele faz). O problema é que não existe nenhuma limpeza dos recursos utilizados no interior do bloco de teste. Exemplo 7 é uma versão atualizada que descreve como, antes do Java SE 7, um programador resolve este problema.

Exemplo 7:

public class ExampleTryResources
{
   public static void main(String[] args)
   {
   	BufferedReader reader = null;

   	try {
   		URL url = new URL("http://www.yoursimpledate.server/");
   		reader = new BufferedReader(new
				InputStreamReader(url.openStream()));
   		String line = reader.readLine();
   		SimpleDateFormat format = new SimpleDateFormat("MM/DD/YY");
   		Date date = format.parse(line);
   	}
   	catch (MalformedURLException exception) {
   		// Capturando problemas de conversão de URL.
   	} catch (IOException exception) {
   		// Capturando problemas de I/O.
   	} catch (ParseException exception) {
   		// Capturando problemas de conversão de datas.
   	} finally {
   		if (reader != null) {
   			try {
   				reader.close();
  				 } catch (IOException ex) {
   				ex.printStackTrace();
   			}
   		}
   	}
   }
}

Observe que tivemos que adicionar um bloco finally que fecha o BufferedReader caso ele tenha sido inicializado. Além disso, note que agora temos a variável leitora fora do bloco try. Isso é um pouco mais de código do que necessitamos se a única coisa que você precisa fazer é fechar o leitor se uma exceção I/O acontecer.

No Java SE 7, isto pode ser feito de uma forma mais concisa e limpa, com omostrado no exemplo 8. A nova sintaxe permite que você declare recursos que fazem parte do bloco try. O que isto significa é que você define os recursos antes do tempo e o tempo de execução fecha automaticamente os recursos (caso já não estejam fechados), após a execução do bloco try.

Exemplo 8:

public static void main (String [] args)
 {
    tentar (BufferedReader reader = new BufferedReader (
   	 new InputStreamReader (
   	 nova URL ("http://www.yoursimpledate.server/"). OpenStream ())))
    {
   	 Seqüência de linha = reader.readLine ();
   	 SimpleDateFormat formato = new SimpleDateFormat ("MM / DD / AA");
   	 Data = Data format.parse (linha);
    } Catch (ParseException | exceção IOException) {
   	 // Lidar com os problemas de I / O.
    }
 }

Note que no exemplo 8, a abertura atual acontece na declaração do try (…). Esteja ciente de que este recurso só funciona em classes que implementam a interface AutoCloseable.

Conclusão

A mudanças na manipulação de exceções do Java SE 7 permite que você não apenas programe de forma mais concisa, como demonstrado nos exemplos de multi-catch, mas eles também permitem que você manipule parcialmente uma exceção e, em seguida, relance, como mostrado nos exemplos. Java SE 7 vai também facilitar a criação de códigos para tratativas de erros mais limpos, assim como vimos nos exemplos de try-com-recursos. Estes recursos, juntamente com outros oferecidos pelo Project Coin, permitem que os desenvolvedores Java sejam mais produtivos e escrevam códigos mais eficientes.

Nunca é muito tarde (nem cedo) para aprender a programar

Traduzido de ALT1040
Texto de Pepe Flores

Não seu programador. Ainda que me pareça fascinante o mundo da informática, quando tentei aprender uma linguagem de programação por conta própria, terminei abandonando por uma quantidade inumerável de pretextos. Que não tenho tempo, que é complicado, que tem muita informação para processar. Desculpas. Programar é algo que qualquer pessoa pode fazer (mas não qualquer tem a disposição de aprender). Requer criatividade, inteligência, curiosidade e esforço. Necessita paixão, imaginação, planejamento e improvisação. Mas, mais que nada, se deve ter vontade, como em toda atividade humana.

Faz um ano iniciei uma start-up com uns amigos. Me cerquei de uma equipe excepcional de programadores. Durante os meses de desenho do software, aprendi centenas de lições valiosas, impossíveis de resumir em algumas poucas linhas. Mas, antes de tudo, descobri que o trabalho do programador não perde nada em criatividade de um artista ou a disciplina de um matemático. É a pura faísca de criação, o converter de uma ideia em algo plausível, executável, real. Como diria outro amigo, se convertem litros de café em linhas de código, e as linhas de código em um programa novo, vivo.

Durante esta etapa, entendi como pensar (um pouco) como desenvolvedor. Se aprende a olhar as coisas desde outra perspectiva, desde como fazer possível algo com os recursos que se conta. A observar as possibilidades, a convertê-las em uma série de passos para executar algo, encontrar soluções. Quem tenha criado um software sabe das noites sem dormir e das listas de requerimentos quilométricas. Se aprende a pensar um passo adiante, porque o usuário final, em sua inteligência desajeitada, é capaz de encontrar uma imperfeição, um erro, um conflito em um sistema que consideramos a prova de tolos. Tem que prevenir antes de lamentar.

Não aprendi a programar em nenhuma linguagem, mas sim o mínimo de algumas. E, sobre tudo, a lógica que existe por trás. Isso é importante, porque como diria Arthur C. Clarke, “qualquer tecnologia suficientemente avançada é indistinguível da magia”. Para muitos, o que faz o computador, o telefone ou qualquer dispositivo nos pode parecer questão de feitiçaria. Não é. É resultado de esforço e a mente de milhares de pessoas. Entender os conceitos por trás desta aparente magia nos ajuda a ser mais críticos, mais analíticos, mais compreensivos. Inclusive, mais curiosos e arriscados. Assim como a ciência nos ajuda a entender a natureza, a informática nos explica este mundo virtual que nos rodeia.

Faz um par de dias, li que ensinar a programar aos filhos será equivalente a ensinar a andar de bicicleta. Concordo. Programar vai mais pra lá de escrever linhas e linhas: é uma forma de entender o mundo como criador. Por isso penso que este pensamento crítico deve ser ensinado desde o berço, mas também, que é uma habilidade indispensável para qualquer pessoa. Não necessitamos ser o seguinte Stallman, Torvalds ou Gates. Basta com que, por simples curiosidade, necessidade ou atrevimento, nos animemos a descifrar estas frases aparentemente ininteligível que lhe dão forma a nossa realidade virtual. Nunca é muito tarde (nem muito cedo) para começar.

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>

Hackathons, uma experiência imperdível de conhecimento

Traduzido de ALT1040.

Vá a festas de gente que nãoo conhece” – Alvert-Lásló Barabási, autor do Linked

Um hackathon é um evento organizado por hackers, para hackers, como fim de programar ou construir uma solução de forma colaborativa, durante um prazo determinado de horas, de preferência no mesmo espaço físico. Evidentemente, hackathon é uma palavra composta de hack y marathon, uma corrida em busca do melhor hack possível, uma herança maravilhosa da cultura hacker.Os hackthons ajudam a construir e fortalecer comunidades, obedecem a um modelo de colaboração e competência com tão bons resultados que merece ser imitado em outros âmbitos: na aula, no trabalho, no governo. Além disso, assistir a um hackathon é uma experiência imperdível na vida. Vejamos porque.

Colaboração

O trabalho em equipe é fundamental para participar em um hackathon, um grupo pequeno onde a comunicação flui sem obstáculos, onde as habilidades se somam e o objetivo principal vai além de qualquer ego (no caso ideal). Participar em um hackathon implica colaborar  em uma equipe de respostas rápida, efetivo e criativo para resolver problemas. Visto a uma escala maior, um hackathon é sobre equipes formando uma equipe imensa, total, para materializar as melhores idéias.

Redes

Vistos com maior profundidade, os hackathons são eventos de redes. Onde os assistentes (e cada uma de suas idéias) são nós, e a comunicação entre eles são as conexões: a exaustiva distribuição de idéias. Em um hackathon as pessoas estendem suas redes de contatos, sim, mas mais ainda sua coleção de idéias novas. Em um evento assim as idéias competem e se disseminam exponencialmente: ao final, um equilíbrio particular filtra as melhores, porque todas as idéias são discutidas, detalhadas, misturadas e, eventualmente, evolucionadas. Os hackathons geram redes abertas e adaptáveis de conhecimento.

Conhecimento

Um hackathon é um evento que cataliza a geração e distribuição de conhecimento porque concentra mentes dispostas a colaborar em redes. Redes de pessoas autônomas, autodidatas, participativas. Assim mesmo, se trata de um evento onde as idéias são analisadas, inclusive melhoradas, por e para a comunidade. Os hackathons são as oportunidades de praticar intensamente a aprendizagem baseada em problemas. Se na aula primeiro aprendemos conceitos e logo resolvemos problemas, nos hackathons sucede justamente o contrário. E funciona muito bem.

Como começar

Por sua definição os hackathons são eventos feitos para programadores, como dito acima apresentam um modelo a seguir para todos aqueles que amam aprender solucionando problemas. Por exemplo, tive a oportunidade de utilizá-los em minhas aulas de programação desta forma:

  1. Apresentação de um problema, de preferência real
  2. Formação de equipes de trabalho de quatro a cinco alunos
  3. Definição de ferramentas de trabalho
  4. Debate em equipe e logo de forma grupal os elementos do problema
  5. Definição do formato de entrega de resultados, em tempo e forma
  6. Desenvolvimento de soluções criativas, perturbadoras, efetivas
  7. Apresentação por equipe da aproximação ao problema: a essência da sua solução
  8. Breve roda de perguntas e respostas
  9. Seleção das melhores soluções
  10. Reflexão autocrítica para melhorar.

Esta é uma pequena metodologia que não é em absoluto original, porém funciona para que os alunos colaborem, formem redes de idéias e se potencializa o conhecimento a partir da solução de um problema específico. Imaginemos este modelo sobre tudo em âmbitos fechados como os governamentais ou inclusive empresariais.

Você pode começar por você mesmo de forma autodidata, com seu grupo de amigos, em sia comunidade, preparar seu próprio hackathon ou participar nos que acontecem em seu país, visitar ou inaugurar um hacklab ou hackerspace, deixe-se contaminar de boas idéias, imagine como uma cadeia de DNA necessitada da rica informação genética de outros. O ponto é aprender, desenvolver ao máximo seus talentos, inclusive descobrir-los quando está em seu limite.

Um hackathon, idealmente, é sobre servir a uma causa comum. E funciona.

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>

Utilizando o Google Charts – Parte 1: Hello Charts

O Google Charts é uma poderosa ferramenta JavaScript para criação de diversos tipos de gráficos e que são facilmente implementados em páginas HTML, proporcionando uma excelente apresentação visual e que não requer instalação de componentes, uma vez que toda informação é processada pelo próprio Google.

Neste primeiro post abordarei a criação de um simples gráfico de pizza (ou torta, já que o nome em inglês é PieChart) mostrando como chamar a API, definir o tipo de gráfico e setar seus valores.

Para criar um gráfico são necessárias basicamente três bibliotecas: a API Google JSAPI, a biblioteca Google VIsualization e a biblioteca referente ao gráfico desejado. Estas bibliotecas podem ser carregadas utilizando as tags <script> na sua página HTML, da seguinte forma:

<!-- Carregando API JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Carregando a biblioteca Visualization e a biblioteca piechart
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);
  // ... criação do gráfico ...
</script>

O método load() possui os seguintes parâmetros:
‘visualization’: Carregando a biblioteca Google Visualization
‘1;0’: Versão atual da biblioteca
packages: lista com os nomes dos pacotes de gráfico desejados. O pacote ‘corechart’ é o mais básico, onde estão os gráficos do tipo pie, bar e column. Outros tipos de gráficos mais complexos fazem partes de outros pacotes, bastando apenas definir os pacotes desejados, como por exemplo o pacote de gráficos tipo tabela:

google.load('visualization', '1.0', {'packages':['corechart','table']});

A linha seguinte define qual método será chamado (drawchart) após a confirmação de resposta do google ao método load().

O próximo passo é definir o conjunto de dados para formar nosso gráfico. Para isso o pacote Visualization possui a classe DataTable que é uma tabela bidimensional, com linhas e colunas, onde cada coluna possui um tipo de dado, um ID opcional e um label opcional. Existem várias formas de se criar um DataTable e vamos explorar isso melhor em um próximo post.

Os dados no DataTable precisam estar organizados em um formato esperado pelo gráfico. Os gráficos mais simples como os tipos barra e coluna, necessitam de um tabela com no mínimo duas colunas, onde cada linha da tabela representará uma barra do gráfico. A primeira coluna da tabela sempre representará os textos descritivos do gráfico (ou seja, nosso eixo X no caso de um gráfico de colunas) e a segunda coluna representará os valores do gráfico (eixo Y no caso de um gráfico de colunas). Casa coluna adicional da tabela representaria uma distinta série em nosso gráfico, no caso de gráficos com múltiplas séries, mas isto também será tema de um futuro post.

A seguir um exemplo de código para popular um DataTable:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Filiais');
data.addRows([
  ['Norte', 3],
  ['Nordeste', 7],
  ['Sul', 12],
  ['Sudeste', 23],
  ['Centro-Oeste', 9]
]);

Todo gráfico pode ser customizado de diversas formas, e com os componentes do Google Charts não é diferente. Para configurar as customizações basta criar um objeto JavaScript com o nome e valor da propriedade desejada. Cada gráfico pacote possui uma série de propriedades e podem ser visualizadas na documentação dos gráficos, assim como as opções disponível para o PieChart. A seguir um exemplo de como definir a posição da legenda, o título do gráfico, opções de 3D e tamanho do gráfico.

var options = {
  'legend':'left',
  'title':'Vendas Por Região',
  'is3D':true,
  'width':400,
  'height':300
}

A respeito do tamanho do gráfico, podemos especificar esta propriedade em dois lugares: no HTML através do elemento <div>, ou nas opções do gráfico através do javascript. Se for especificado em ambos, o gráfico sempre vai tender a usar os tamanhos definidos no HTML, e se não for especificado, o gráfico pode não ser renderizado adequadamente.

O último passo é desenhar o gráfico. Para isso basta criar uma instância da classe do gráfico e executar o método draw(). Neste caso a classe utilizada é google.visualization.PieChart. O método construtor da classe do gráfico necessita de apenas um parâmetro, a referência ao elemento onde o gráfico será criado.

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Portanto neste caso é necessário criar um elemento HTML (normalmente um <div>) e atribuí-lo um ID, para que este possa ser referenciado no construtor da classe. Finalmente basta executar o método draw(), que possui dois parâmetros. O primeiro é o DataTable, o objeto que contém os dados do gráfico, e o segundo é o objeto options, com as configurações de customização. O segundo parâmetro não é obrigatório.

Parabéns! Você acabou de criar seu primeiro gráfico utilizando o Google Charts Tools.

Abaixo está disponível o código completo (HTML e JavaScript) deste 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', 'Filiais');
		  data.addRows([
			['Norte', 3],
			['Nordeste', 7],
			['Sul', 12],
			['Sudeste', 23],
			['Centro-Oeste', 9]
		  ]);

	      // Opções de customizaçaõ
	      var options = {
			'legend':'left',
			'title':'Vendas Por Região',
			'is3D':true,
			'width':400,
			'height':300
		  }

	      // Instanciando e desenhando o gráfico, passando algunas opções
	      var chart = new google.visualization.PieChart(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>

E o resultado obtido:

Algumas considerações: Como podem ter observado, em nenhum momento instalamos nenhuma classe ou componente. Todo processamento para criação do gráfico é executado pelo próprio Google. Portanto para o correto funcionamento será sempre necessário uma conexão com Internet. Mesmo assim, esta solução me pareceu muito eficiente e tem funcionando perfeitamente.

Finalmente, para aqueles que querem começar JÁ a brincar com o Google Charts, não é necessário instalar nenhum ambiente de desenvolvimento. Podemos utilizar a própria plataforma do Google para isso. Através do Google Code Playground podemos testar vários modelos de gráficos e outros componentes do Google, alterar suas configurações e visualizar o resultado. É possível até mesmo executar o código em modo Debug. É uma ferramenta muito poderosa, e porque não divertida!

Pontanto, Hello Chart e mãos a obra!

 

Drag & Drop em Adobe Flex: Como limitar a quantidade de elementos

Neste post gostaria de compartilhar uma solução que aplicamos em uma de nossas aplicações para limitar a quantidade de elementos em uma List enquanto o usuário utiliza as funcionalidades de Drag & Drop.

Basicamente possuímos duas lista, onde a lista de origem pode possuir diversos elementos e a segunda lista, que receberá os elementos selecionados pelo usuário, deve aceitar uma quantidade máxima de elementos.

Após configurar as propriedades de drag e drop de cada elemento, habilitamos o evento dragDrop na lista destino. Neste evento realizaremos a validação da quantidade máxima aceitável de elementos, através da soma dos elementos já existentes na lista de destino mais a quantidade de elementos que o usuário está tentando adicionar através do drop.

Para a quantidade de elementos já existentes na lista basta obter a propriedade length do dataprovider da list.

var qtdeDestino:int = event.currentTarget.dataProvider.length;

Para a quantidade de elementos que o usuário está tentando adicionar à lista, obtemos a propriedade ‘items’ do dragSource do evento, criando um Array. Em seguida obtemos a propriedade length do Array.

var itemsArray:Array = event.dragSource.dataForFormat('items') as Array;
var qtdeOrigem:int = itemsArray.length;

Finalmente basta somar os valores e comparar com a quantidade máxima de elementos desejada. Após a validação apresentamos uma mensagem de alerta para o usuário.

Para que não ocorra de mesmo após exibir a mensagem de alerta os elementos serem inseridos na lista de destino, devemos cancelar o evento de drop para que os elementos selecionados retornem para a lista de origem.

event.preventDefault();
event.target.hideDropFeedback(event);
DragManager.showFeedback(DragManager.NONE);

Abaixo apresento o código completo do exemplo que criei para esta solução:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">

	<mx:Script>
		<![CDATA[
			import mx.managers.DragManager;
			import mx.controls.Alert;
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
		
			private function initApp():void {
                lstDe.dataProvider = new XML(getDados()).dado;
                lstPara.dataProvider = new XML(<dados></dados>).dado;
            }
            
            private function getDados():XML {
            	var xmlDados:XML = 	<dados>
										<dado>Linha 1</dado>
										<dado>Linha 2</dado>
										<dado>Linha 3</dado>
										<dado>Linha 4</dado>
										<dado>Linha 5</dado>
										<dado>Linha 6</dado>
										<dado>Linha 7</dado>
										<dado>Linha 8</dado>
										<dado>Linha 9</dado>
										<dado>Linha 10</dado>
									</dados>;
            	return xmlDados;
            }
            
            private function dragDropHandler(event:DragEvent):void {
				
				//Array com elementos que estão sendo movidos
				var itemsArray:Array = event.dragSource.dataForFormat('items') as Array;
				
				//Quantidade de elementos da lista de Origem e Destino
				var qtdeOrigem:int = itemsArray.length;
				var qtdeDestino:int = event.currentTarget.dataProvider.length;
				
				//Verificar quantidade máxima de elementos
				if ((qtdeOrigem + qtdeDestino) > 6) {
					Alert.show("Você excedeu a quantidade máxima de registros!");
					//Cencelar evento de Drag e Drop
					event.preventDefault();
				 	event.target.hideDropFeedback(event);
				 	DragManager.showFeedback(DragManager.NONE);
				}
				
	        } 
			
		]]>
	</mx:Script>
	
	<mx:List x="10" y="10" width="173" height="393" id="lstDe" 
		allowMultipleSelection="true"
        dragEnabled="true"
        dragMoveEnabled="true"/>
	<mx:List x="241" y="10" width="173" height="393" id="lstPara"
		dropEnabled="true"
		dragDrop="dragDropHandler(event);"/>
		
	<mx:Button id="btnReset" 
        label="Reset"
        click="initApp()"
     	x="10" y="411"/>
	
</mx:Application>

Qualquer dúvida não exitem em perguntar!

Abs!!!

10 plataformas inovadoras para aprender a programar

Traduzido de ALT1040

Se não aprendemos a programar, nos arriscamos a ser programados… Programe ou seja programado. – Douglas Rushkoff

Acho que para todos aqui está claro que a educação formal, inclusive a universitária, está defasada se não totalmente ultrapassada pela Internet. Com isso me refiro a que a educação formal não aproveita – e as vezes nem sequer re(conhece) – para seu benefício as ferramentas técnicas e metodológicas que a Internet nos está fornecendo. Falo de ferramentas que facilitam e potencializam a aprendizagem em términos colaborativos, massivos, autônomos, inovadores, críticos, ágeis, evolutivos, usáveis e demais.

Não é um assunto fácil o avanço da tecnologia. A educação formal é um gigante que requer uma quantidade enorme de energia para mover um passo. Com os estudantes, sobre tudo entre a geração que nasceu com a Internet, é diferente: hábil para a sobre-informação, as mudanças rápidas e a educação absolutamente informal, de aprendizagem invisível. E justamente por isso é que as instituições universitárias deveriam imitar uma ou mais das seguintes plataformas de aprendizagem, especializadas no ensino da programação mas não menos úteis para outras áreas do conhecimento, só basta imaginá-lo um pouco.

1. Codecademy

Com uma interface limpa e mensagem clara: Aprenda a fazer código. Ponto. Como? A proposta é com JavaScript, a linguagem nativa dos navegadores web, ainda que também conte com outras ferramentas essenciais para fazer web como HTML5 e jQuery. Também é possível criar seus próprios cursos, fazer comunidade, ganhar reputação, inclusive ganhar condecorações sociais por suas conquistas. Codecademy tem um enorme potencial.

2. Try Ruby

Creio que não me equivoco ao dizer que a comunidade em prol da linguagem Ruby tem os tutoriais de aprendizagem de programação mais lindos e divertidos de todos. Por exemplo o famoso Hackety Hack e os espirituais Ruby Koans. Por sua parte, Try Ruby, é um tutorial interativo, quase como um conto programável, que convida a descobrir esta bela linguagem. Eu não pensaria duas vezes e me daria uma oportunidade de aprender Ruby o quanto antes.

3. Skillshare

“Aprenda o que seja de quem seja, onde seja”. Esta é a promessa de uma plataforma que conecta uma rede de nós professor/aluno, pessoas que aprendem e ensinam também a programar através de cursos onde a aprendizagem é guiada por uma comunidade.

4. Programr

Programe agora mesmo Java, PHP, C++, Python e mais linguagens de programação em seu navegador, sobre três princípios básicos: aprenda, codifique e comparta. A interface não é a mais bela, porém em termos estruturais funciona bem. Seus desafios de programação são uma excelente ideia.

5. Team Tree House

Sobre o lema “O que quer aprender hoje?”, Team Tree House oferece cursos on-line, baseados em vídeos curtos, muito bem explicados e sequenciados, sobre programação web e programação de dispositivos móveis com iOS. É necessário pagar uma assinatura para ter acesso a todos os materiais, que com certeza se atualizam e crescem com frequência. Me encanta que utilizem condecorações e que estas sejam um indício de uma educação que vai mais longe do que títulos universitários.

6. Code School

“Aprenda fazendo” é uma plataforma apoiada por IBM, Github, AT&T, cheia de cursos on-line, também orientada para a gameficação da educação. O desenho da página é fabuloso. Merece um artigo a parte para discutir sobre o futuro da educação da programação.

7. Khan Academy

Esta plataforma é o YouTube da educação on-line, repleta de vídeos de aulas completas de programação e muitos outros temas. Apesar de que em comparação com as outras plataformas Khan Academy parece tradicional, o mais importante é que funciona (inclusive em móveis).

8. Hackasaurus

Mozilla sempre está preocupada pela educação em torno da web aberta, baseada em padrões, com o navegador como laboratório de idéias cozinhadas com HTML5. Hackasaurus é uma atrativa tentativa de levar esta aprendizagem a outro nível, quase como os blocos de Lego, onde a programação é construir, misturar, experimentar: um ato absolutamente criativo.

9. Stanford University

Aqui não tem mais do que vídeos e apresentações tradicionais. Porém no fundo temos um esforço acadêmico imenso dos professores da Universidade de Stanford em oferecer de maneira coerente o que alguns vêm como o melhor curso de programação de aplicações móveis para iOS na rede. Seria incrível uma versão massiva como o curso de inteligência artificial que Norvig y Thrun deram no final do ano anterior.

10. P2P University

Todos professores, todos alunos: educação P2P, entre iguais. Educação colaborativa, construída por comunidades de entusiastas, com espírito de código aberto e cultura livre. Como conceito é maravilhoso; como implementação segue em constante evolução, muito orgânica. Aqui encontrará excelentes cursos de programação, alguns de temas raros, mas todos interessantes.