O que aprendi com a programação hoje: dia 3 - DevTools

Esse post faz parte de uma série: o que aprendi com a programação, e tudo começou no dia 1.

Sabem o que mais fiquei surpreso com Javascript? Ao preparar os ambientes de desenvolvimento para realizar a execução dos testes, percebi o quanto os navegadores de internet evoluíram. Pois é, você deve estar se perguntando: quanto tempo esse cara não se informa sobre as tendências de desenvolvimento Web? Foram pelo menos 10 anos sem me preocupar com Javascript. Mas antes tarde que nunca, não é mesmo? :)

Copyright

Com advento dos novos recursos da especificação do HTML 5, surgiram novas possibilidades de desenvolvimento, e com elas, há uma nítida evolução dos navegadores de internet. Quem ainda usa Internet Explorer? É claro que muita gente usa, porém, é o Chrome e Firefox que são os lideres do rankink mundial de uso pelas pessoas. Mas o que isso tem haver com a programação?

No caso do Chrome, da Google, para desenvolvedores Web, podem facilmente testarem seus aplicativos utilizando seu próprio browser, e, praticamente não se precisam de muitas outras ferramentas. Mesmo assim, não deixamos de utilizar editores para realizar a codificação, porque elas melhoram a produtividade.

Vou abordar aqui um pouco de como podemos usar as ferramentas de desenvolvimento, tentando relatar brevemente, como foi o nosso aprendizado nesta jornada de preparação do ambiente de programação Javascript, além de sua forma de execução e teste no browser.

Ambiente de Desenvolvimento para Web ou Mobile?

Já que estamos falando de ambientes de programação voltados para Web, deixa eu lhe explicar o contexto do projeto que estou contribuindo para sintuá-lo melhor. Me refiro às tecnologias móveis (voltada para smartphones), utilizando front-end HTML 5, CSS e Javascript para implementação do projeto. Normalmente usamos essas tecnologias para desenvolvimento voltado para Web, mas neste caso, a ideia é aplicá-lo para tecnologia mobile. Este é o cenário que estou inserido.

As aplicações voltadas para esse mobile target (celulares), normalmente utilizam a própria linguagem nativa para seu desenvolvimento. Por exemplo, no Android usamos a linguagem Java, no iOS usamos a linguagem Objective-C (agora com a nova linguagem Swift), no Windows Phone a linguagem C#, e assim sucessivamente. E se usássemos a expertise de Web (HTML 5, CSS e Javascript) para programar para tecnologias móveis? Essa é a proposta da tecnologia TIZEN, no qual estou investigando.

Ao instalar o SDK do Tizen e iniciar o desenvolvimento do projeto, em algum momento precisamos testá-lo. Há duas possibilidades: usando o próprio emulador do Tizen, ou usando um navegador de internet, tal como o Chrome para reproduzir o nosso aplicativo. Você gostaria que eu falasse mais sobre Tizen? Deixe seu comentário se preferir.

Mas voltando ao ponto deste post: o que aprendi com a programação usando essa tecnologia: o conhecimento da tríade HTML, CSS e Javascript já estão bastante consolidados e facilmente entendemos como fazer as coisas aparecerem na tela, tudo que se precisa é a inteligência do browser para compreender as especificações dessas tecnologias. Foi o que a Samsung está fazendo com o Tizen. Mas vamos deixar esse assunto para outro momento.

Aprendi que o browser Chrome possui ferramentas que todo desenvolvedor Web, possivelmente já sabem que tem, mas que eu somente as descobri agora. Pelo menos isso me animou, pois assim posso testar de forma rápida os códigos Javascript, HTML e CSS. 

Usando a ferramenta DevTools

Quando usamos o Chrome, podemos usar a ferramenta integrada DevTool: https://developer.chrome.com/devtools

"The Chrome Developer Tools (DevTools for short), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization."

Para abrir o DevTools, podemos fazê-lo de 3 formas:

1) Selecione o menu do Chrome, e no topo direito acesse Tools/Developers Tools (talvez esses nomes estejam em português);

2) Com o botão direito em qualquer área da página atual sendo exibida, selecione Inspect Element (Inspecionar Elemento);

3) Usar atalhos de comandos do teclados do seu computador. Ex. para o MAC OS use:
     

Atalhos (veja fonte)

   
Área do DevTools    

As áreas são organizadas dentro de grupos de tarefas e estão organizadas na barra de ferramenta superior da janela principal. Cada item da área corresponde a um painel de trabalho com um tipo específico de finalidade ou propósito, incluindo elementos DOM, recursos e códigos fontes dos conteúdos carregados atualmente pela janela do browser.

DevTools do Chrome

Em resumo temos 8 diferentes tipos principais de ferramentas disponíveis: Elementos, Recursos, Rede, Fontes, Linha Tempo, Profiles, Armazenamento, "Auditoria" e Console. As principais áreas que observei foram a Console e Fontes. Em Console podemos visualizar uma saída de dados textual referente ao comando abaixo:

console.log("alguma coisa para mostrar no console...");

Extremamente útil para exibir alguma coisa nos blocos do nosso algoritmo. Fácil de usar e rápido de visualizar. Basta acrescentar o comando nas linhas do programa, como código Javascript e carregar a página HTML que usa o código javascript. Somente quando exibirmos essa tela Console que poderemos perceber seu uso.

A outra ferramenta fica em Fontes (Sources), que considero a mais incrível de todas, a tela mais inovadora dessa ferramenta. Sabe por que? Ela permite fazer Debugging JavaScript, ou seja, depuração de código passo a passo. Semelhante as IDEs tradicionais das outras linguagens.

Ferramenta de Debugging

"As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful."

Para usar simplesmente carregue primeiro sua página HTML, que utiliza o seu código Javascript, em seguida abra o DevTools seguindo os procedimentos mencionados anteriormente, e então acesse a área Sources/Fontes. Procure o seu arquivo Javascript ou HTML que possua o javascript, e o abra clicando duas vezes. Por fim, procure a linha no qual gostaria de realizar a depuração e clique com o mouse na borda da linha. Instruções detalhadas veja aqui.

Agora quando você rodar o seu HTML interagindo ou recarregando a página, quando a execução do algoritmo chegar na função no qual definiu seu breakpoints, a linha irá parar naquele ponto, e você poderá rodar passa a passo usando os botões Step Into ou Step Over. Existem atalhos de teclado que podem ser aprendidos para fazer isso de forma mais rápida no dia a dia.

Depois que aprendi a depurar em código Javascript, todos os algoritmos mais complexos, puderam ser validados considerando essa funcionalidade, permitindo acelerar ainda mais o desenvolvimento do algoritmo.

No próximo post, que tal mostrar como colocar sons e como gerenciá-los com Javascript? Isso permite inserir efeitos sonoros em sua aplicação. Por se tratar de um jogo, essa funcionalidade é extremamente interessante.

O que aprendi com a programação hoje: dia 2 - animação em Javascript

Esse post faz parte de uma série: o que aprendi com a programação, e tudo começou no dia 1.

Estou contribuindo em um projeto no qual estamos utilizando animações visuais para compor a mecânica de um jogo. Essas animações, produzem alguns efeitos que são exibidas durante a execução do jogo.

Em projetos que desenvolvemos usando a linguagem de programação Javascript, normalmente, o fazemos para aplicações voltadas para Web, ou seja, a interface visual vai rodar dentro do navegador de internet (browser). Possivelmente, você já deve ter visto algum jogo dentro do Facebook ou aplicativos que se integram na tela da rede social. A grande parte desses jogos e aplicativos que rodam pelo browser, são integrados lá e utilizam as tecnologias HTML 5 e CSS, além da linguagem Javascript, que permite integrar essas partes.

Aprendi a criar uma animação usando HTML usando Canvas do Javascript e vou tentar explicar como funciona uma animação usando essa linguagem, assim como, tentarei listar algumas dicas do que foi feito para resolver alguns problemas encontrados e que estão relacionados com animação.

A primeira coisa que você deve saber é que um Canvas é uma área de desenho. Neste espaço chamado Canvas, você poderá exibir um objeto qualquer, esse objeto será posicionado dentro de um sistema cartesiano (vide figura), e pode ter uma cor sólida ou baseado em uma imagem pronta. Dentro da área do Canvas o browser irá desenhar através de um processo de pintura, onde serão definidas as posições que os objetos devem ser exibidos em coordenadas x e y.

Para mais informações, acesse uma ótima referência sobre Canvas neste site: http://diveintohtml5.com.br/canvas.html

Um exemplo de arquivo bola.html

 

 

header


 
        This browser is not supported
    

 

  

footer



 

Se quisermos desenhar um objeto usando Canvas podemos fazer de diferentes formas, porém, percebi junto a minha equipe que uma forma intuitiva para nós foi adotar uma representação na estrutura do código Javascript, tal como usamos as classes na linguagem Java. Vejamos o exemplo:

Exemplo de aquivo javascript chamado bola.js

var Animacao = {
 // variaveis globais
 CANVAS : null,
 CONTEXT : null,
 bola : null,

 // inicializa a Animacao
 init : function() {
  // variaveis de canvas
  Animacao.CANVAS = document.querySelector(".canvas");
  Animacao.CONTEXT = Animacao.CANVAS.getContext("2d");

  // registra eventos
  Animacao.addEventListeners();


  bola = new Bola(0,0);
  bola.init();

  setTimeout(Animacao.pintar,100);


 },

 // limpa a tela
 clearCanvas : function() {
  Animacao.CONTEXT.clearRect(0, 0, Animacao.CANVAS.width, Animacao.CANVAS.height);
 },

 // registra eventos
 addEventListeners : function() {
  Animacao.CANVAS.addEventListener("click", Animacao.clickAnimacaoHandler);
 },

 clickAnimacaoHandler : function(e) {

  console.log("clique da Animacao aqui");

  Animacao.pintar();

 },

 pintar : function() {

  // desenha a Animacao aqui
  console.log("animar aqui");

  if (bola) {

   Animacao.clearCanvas();

   bola.update();
   bola.draw();

  }

 },

};


function Sprite(image) {
 this.image = new Image();
 this.image.src = image + ".jpg";

 this.draw = function(x, y) {
  Animacao.CONTEXT.clearRect(x, y, this.image.width, this.image.height);
  Animacao.CONTEXT.drawImage(this.image, x, y);
 };

 this.animate = function() {
  // TODO animate here
  console.log("animar o item durante seu deslocamento");
 };
}

function Bola(x, y) {
 this.x = x;
 this.y = y;
 this.clicked = false;
 this.sprite;

 this.init = function() {
  this.sprite = new Sprite("bola");
 };

 this.update = function() {

  this.y += (this.sprite.image.height/5);

 };

 this.draw = function() {
  if (this.clicked) {
    console.log("foi clicado");
    this.animate();
  }

  this.sprite.draw(this.x, this.y);
 };

 this.click = function() {
  this.clicked = true;
  this.draw();
 };

 this.animate = function() {
  this.type.sprite.animate();
 };

}


// o javascript vai carregar esse metodo a cada refresh no browser
window.onload = Animacao.init;

Note que esse arquivo representa a estrutura do Javascript para representar o conceito da Bola, bem como, um conceito de Sprite (herança de Java ME), onde podemos criar esse objeto para representar a imagem desejada, com seu x e y, um método para desenhar na tela e outro para atualizar suas posições.

Essa representação proporcionou reusar o código de forma legível para nossa equipe. Permitiu por exemplo, que qualquer função possa ser executada simplesmente invocando o nome da estrutura e sua função.

Como que animação de nossa bola funciona em nosso código Javascript?

Assumindo que animação ocorra a cada click sobre a bola, posso programar um evento que mude a posição do Sprite x e y, alterando seus valores e mandando o Canvas pintar a tela novamente. Quando o Canvas pintar a tela, as posições x e y da bola já foram alteradas para novas posições de acordo com uma direção desejada e portanto, vai ser mostrado após a nova pintura da janela, outra bola em um ponto da janela diferente da interior.

Esse efeito produz uma percepção ao usuário que chamamos de animação. Porém, para esse efeito ser considerado uma animação, tem que parecer um deslocamento parecido com o que ocorre com uma bola real. Para que o efeito fique mais parecido com o mundo real é necessário diminuir o intervalo de deslocamente do x e y, além de aumentar a quantidade de pinturas deste objeto no Canvas. Existe uma relação conhecida chamada Frames/segundos. Essa relação pode ser considerada em seu algoritmo para tornar o efeito de pintura repetitivo e constante, dando a impressão que existe realmente uma bola se movendo. Isso sem considerar efeitos da física, tal como os jogos modernos exploram muito bem.

Portanto, a cada click do mouse eu desejo que a bola se desloque de um ponto a outro. Alguns problemas podem ser notados nessa animação. Ela não está parecendo uma animação. :) Chamamos isso de animação com fluidez no seu efeito perceptível pelo usuário. Quanto mais próximo do mundo real, melhor. Mas sabemos que temos limitações óbvias, tais como:

• poder computacional para explorar cálculos matemáticos;
• experiência dos desenvolvedores que estão acostumados a fazerem aplicativos tradicionais e que, geralmente, não requerem fazer animações específicas;
• um objeto, quando desenhado e visto de uma perspectiva 2D tem diveras percepções de acordo com o seu desenho, mas para parecer uma animação fluida, haveria necessidade de desenha-lo em diversos ângulos (frame a frame), para cada movimento desejado. Imagine uma animação dos cabelos do ser humano. Quantas possibilidades de diferentes maneiras posso representar dependendo da direção do vento? Quanto mais próximo do real, mais difícil de representar; 

O que podemos fazer para tornar a animação um pouco melhor?

Estudar técnicas de animação 2D é um bom começo. Existem diversos framework para JavaScripts que prometem simplificar o uso de animações. Porém, decidimos tocar o projeto com a linguagem Javascript nativamente porque precisávamos aprender melhor essa linguagem e acreditamos que o esforço de fazer desta forma  compensaria porque absorveríamos maior entendimento. De fato isso se concretizou.

Então recomendo que quando haver necessidade de fazer algo usando a linguagem pura ou usar algo pronto, considere avaliar o seu caso em relação a produtividade vs. aprendizado. Precisávamos aprender a linguagem porque acreditávamos que teríamos outras dificuldades, caso a base do conhecimento essencial não estivesse bem desenvolvida previamente. Usar a linguagem pura, nos permitiu desenvolver melhor nossas habilidades. Hoje porém, poderemos considerar utilizar frameworks de terceiros, de forma mais segura, sobre o que realmente precisamos para nosso problema atual.

Mas voltando ao foco da pergunta, podemos melhorar animação, e de fato melhoramos fazendo o deslocamento do x e y com intervalos menores e pinturas mais constantes do Canvas. Considerando que o desenho da imagem da bola possua 180 pixel de largura e altura, pode-se dividir em 5 partes, e para cada parte fazer um pintura.

Então, no caso de desejar fazer a bola descer a cada click, pode:

var Animacao = {
 // variaveis globais
 CANVAS : null,
 CONTEXT : null,
 bola : null,
 emProcessoAnimacao : false,
 contadorAnimacao : 0,

 // inicializa a Animacao
 init : function() {
  // variaveis de canvas
  Animacao.CANVAS = document.querySelector(".canvas");
  Animacao.CONTEXT = Animacao.CANVAS.getContext("2d");

  // registra eventos
  Animacao.addEventListeners();


  bola = new Bola(0,0);
  bola.init();

  setTimeout(Animacao.pintar,100);


 },

 // limpa a tela
 clearCanvas : function() {
  Animacao.CONTEXT.clearRect(0, 0, Animacao.CANVAS.width, Animacao.CANVAS.height);
 },

 // registra eventos
 addEventListeners : function() {
  Animacao.CANVAS.addEventListener("click", Animacao.clickAnimacaoHandler);
 },

 clickAnimacaoHandler : function(e) {

  Animacao.emProcessoAnimacao = true;
  Animacao.pintar();
 },

 pintar : function() {

  // desenha a Animacao aqui
  Animacao.clearCanvas();

  bola.update();

  bola.draw();

  // chamar novamente o metodo (pelo menos 5 vezes)
  if (Animacao.emProcessoAnimacao) {

    Animacao.contadorAnimacao++;

    if (Animacao.contadorAnimacao >= 5) {
     Animacao.contadorAnimacao = 0;
     Animacao.emProcessoAnimacao = false;

    } else {

     // repintar a tela novamente
     setTimeout(Animacao.pintar,50);
    }


  }


 },

};


function Sprite(image) {
 this.image = new Image();
 this.image.src = image + ".jpg";

 this.draw = function(x, y) {
  Animacao.CONTEXT.drawImage(this.image, x, y);
 };
}

function Bola(x, y) {
 this.x = x;
 this.y = y;
 this.clicked = false;
 this.sprite;

 this.init = function() {
  this.sprite = new Sprite("bola");
 };

 this.update = function() {

  this.y += (this.sprite.image.height/10);

 };

 this.draw = function() {
  this.sprite.draw(this.x, this.y);
 };

 this.click = function() {
  this.clicked = true;
  this.draw();
 };

 this.animate = function() {
  this.type.sprite.animate();
 };

}


// o javascript vai carregar esse metodo a cada refresh no browser
window.onload = Animacao.init;

animação fica mais fluída

Note o uso da função  do Javascript: setTimeout(tempo_mili_segundos), essa função permite que possamos agendar um intervá-lo de tempo em mili segundos e passar como argumento  qual função desejamos chamar. Assim podemos chamar a função pintar() constantemente para garantir as 5 pinturas desejadas.

Se você atualizar o código e executar em seu browser, poderá perceber como a animação agora parece mais uma decida um pouco mais suave. Quanto mais suave, em teoria é melhor para a percepção do usuário.

Para baixar os arquivos clique aqui.





Na próxima dica falarei como podemos setar as ferramentas envolvidas de desenvolvimento e como foi o nosso aprendizado da preparação do ambiente de programação Javascript e sua forma de execução no browser. Essa foi uma das melhores sensações que tive do atual estado de ferramentas Javascript, e fiquei extremamente surpreso o quanto foi "fácil" acompanhar a execução, inclusive usando a depuração em tempo real.

O que aprendi com a programação hoje: dia 1 - #javascript

Estou trabalhando no desenvolvimento de uma nova habilidade pessoal, uma competência que a muito tempo estou desejando, um hábito que ainda não tenho na minha vida, e que, vez por outra, tento colocar em prática. Porém, quando a energia ou a minha disposição me abondonava, acabava por desistir de persistir essa prática. Trata-se de uma competência que sempre desejei melhorar, mas que tenho exercitado pouco: o hábito de escrever.

bye fonte

Sendo assim decidi tentar um novo método para colocar em prática nos próximos 30 dias que se seguirão. Vou registrar o progresso das tentativas diárias, e para exercitar essa competência da escrita precisarei escrever alguma coisa, sobre algum tema ou assunto de minha preferência, no qual me permitirá exercitar a escrita, e se tudo ocorrer bem, poderá auxiliar no desenvolvimento do hábito esperado. Não tenho ideia se isso vai contribuir, mas acredito que sim. Então, convido a você a me ajudar acompanhando o progresso diário ou vez por outra.

Decidi abordar sobre o assunto que tenho experiência e familiaridade: a programação. :)

Dizem que as perguntas movem o homem... a pergunta que vou me propor a refletir é:

- O que aprendi com a programação hoje?

Começarei assim: o que aprendi com a programação hoje? dia 1

Em um projeto que estou ajudando a desenvolver, tenho me deparado com a necessidade de usar a linguagem Javascript, e dado meu conhecimento e percepção que tinha dessa linguagem, as primeiras impressões não foram muito boas. Mas isso rapidamente foi mudando a medida que fui conhecendo melhor a linguagem em questão. Percebi que eu havia criado um certo preconceito da linguagem Javascript, e isso me impedia de me informar melhor sobre a evolução desta tecnologia.

Nada que uma demanda nova do mercado não possa resolver. Nos obrigamos a correr atrás do prejuizo, fazendo-o ir buscar o conhecimento necesário da linguagem. Percebi que precisava reaprender desde o básico se quisesse melhor compreender os detalhes da linguagem.

Encontrei um lugar bem legal que permite colocarmos na prática a linguagem Javascript, assim como estudar seus detalhes conceituais. Achei o curso do Codecademy de Javascript. E foi ali que comecei a rever meus conhecimentos prévios e confrontá-los com os novos que estavam sendo vistos.

Aprendi e ainda estou aprendendo com o curso de Javascript do CodeCademy, que não importa a linguagem que você está precisando aprender, mas que tudo pode ser encarado de forma divertida se estamos abertos a novos conhecimentos. O fato de fazer etapa por etapa no ambiente do codecademy me permite lembrar que na minha profissão: desenvolvedor de sistemas e professor, tenho que manter a mente aberta para aprender novas coisas, o tempo todo.

Outro ponto que me fez refletir... creio que não devemos achar que já sabemos tudo sobre determinada linguagem e por isso tomar a decisão de me fechar para novos conhecimentos sobre tal tecnologia. No contexto que eu havia aprendido Javascript eu não tive a devida necessidade de usar para os problemas de outra época, assim não foi despertado muito interesse. Só que ao necessitar deste conhecimento, tive que correr atrás para aprender o suficiente para iniciar meu projeto.

Existem muitas formas de aprender programação: aprendi com o codecademy, no curso de Javascript que a linguagem é extremamente poderosa e simples para coisas que podemos fazer dentro de um navegador de internet (Browser). Mas isso vou deixar para falar amanhã e adiante.