A Alfamídia acaba de disponibilizar uma opção gratuita com as primeiras aulas do curso que apresenta a construção de um jogo de RPG.
Inscrições no curso podem ser feitas diretamente em Curso Gratuito de Desenvolvimento de Jogo de RPG.
domingo, 29 de maio de 2016
sexta-feira, 27 de maio de 2016
Novo Jogo em Javascript
Estamos disponibilizando um novo jogo em javascript, desenvolvido para fins didáticos, desta vez um jogo relativamente mais sofisticado.
Em http://www.alfamidiaonline.com.br/curso-jogos-javascript/explorer/ você pode conferir este jogo, em que você controla um personagem que percorre um cenário infinito gerado por funções matemáticas.
Este é mais um jogos disponibilizado com seu código-fonte e com uso gratuito, profissional ou não.
Alguns recursos utilizados serão apresentados neste blog, e a descrição completa do código-fonte faz parte do curso Criando Jogos Javascript da Alfamídia.
Links:
Em http://www.alfamidiaonline.com.br/curso-jogos-javascript/explorer/ você pode conferir este jogo, em que você controla um personagem que percorre um cenário infinito gerado por funções matemáticas.
Este é mais um jogos disponibilizado com seu código-fonte e com uso gratuito, profissional ou não.
Alguns recursos utilizados serão apresentados neste blog, e a descrição completa do código-fonte faz parte do curso Criando Jogos Javascript da Alfamídia.
Links:
terça-feira, 24 de maio de 2016
Movimentando Personagens com Javascript
Neste artigo mostraremos como controlar o movimento de um personagem por javascript utilizando as teclas do computador.
Para isso utilizaremos algumas das imagens fornecidas pelo site http://untamed.wild-refuge.net/rpgxp.php. Outros sites com imagens gratuitas são listados em nosso portal alfamídia, em http://www.alfamidia.com.br/imagens-gratis-para-jogos/.
O código utilizado é um segmento do código utilizado no curso alfamídia de criação de jogos com javascript.
Observe o código abaixo:
No código acima estamos associando uma função, que chamará o método "move" de "meuCenario", sempre que o evento "keydown" for acionado. Este evento é chamado cada vez que uma tecla é pressionada.
O parâmetro keyCode é um código que corresponde a tecla que foi pressionada. Utilizaremos o teste de determinados valores para tratar cada uma das teclas de seta.
A especificação da função você pode encontrar em https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage.
Aqui nos preocuparemos com seu uso em nosso caso específico. Para isso, vale observarmos as imagens com as quais estaremos trabalhando.
Estas imagens contem um personagem de 32x48 pixels, em 16 posições diferentes. Observem que as linhas (que chamaremos de linhas 0,1,2 e 3) representam 4 direções do personagem, e as colunas (que também identificaremos como 0,1,2 e 3) representam etapas do passo do personagem.
Observe agora, a seguir, o código do desenho que estaremos utilizando. É importante gastar um tempo para entender o que está sendo feito aqui:
A versão mais simples da função drawImage utiliza, além da imagem em si, dois parâmetros para definir a posição da imagem nos eixos X e Y, conforme abaixo:
Aqui estamos utilizando diversos outros parâmetros, e precisaremos entender os mesmos. Para tanto, vale olharmos a especificação da função com seu número completo de parâmetros:
Os parâmetros 3º, 4º e os dois últimos se referem a largura e altura da imagem, respectivamente na imagem original e no destino. No nosso caso, como não estamos redimensionando a imagem, são iguais e representam 32 (largura do personagem) e 48 (altura do personagem).
O que realmente nos interessa são os parâmetros sx e sy. Eles representam as coordenadas x e y que vamos utilizar da imagem original. Se forem 0 e 0, basicamente estamos exibindo uma imagem de 32 por 48, fazendo o corte em 32 e 48 na imagem original.
Se sx for 32, porém, estaremos exibindo não a primeira imagem do personagem, mas sim a imagem do personagem na segunda coluna. Do mesmo modo, se sy for 48, estaremos exibindo a imagem da segunda linha.
Assim sendo, podemos agora entender os parâmetros de sx e sy utilizados. Em ambos temos um índice da imagem multiplicado por 32 ou 48.
This.etapaPasso representa, assim, um número de 0 a 3 correspondendo a etapa do passo.
This.direcaoImagem representa, um número de 0 a 3 correspondendo a direção que o personagem se move.
Mudar a posição do personagem agora torna-se simples também. Selecionando um número de 0 a 3 para this.direcaoImagem, temos cada uma das 4 direções de nosso desenho.
Gerar o movimento do personagem em si é mais complexo, já que exige a exibição de uma sequência de imagens. Existem diferentes abordagens para obter este resultado, mas, via de regra, todas exigirão o uso de funções com intervalo de tempo.
Observe o segmento de código em que implementamos a caminhada no exemplo:
Além de setar a imagem correspondente a direção do movimento, ela controla this.etapaPasso, variando de 0 a 3, encerra o movimento quando atinge a etapa 3, e ainda move 1/4 de posição entre uma posição definida e a outra a cada iteração.
Para isso utilizaremos algumas das imagens fornecidas pelo site http://untamed.wild-refuge.net/rpgxp.php. Outros sites com imagens gratuitas são listados em nosso portal alfamídia, em http://www.alfamidia.com.br/imagens-gratis-para-jogos/.
O código utilizado é um segmento do código utilizado no curso alfamídia de criação de jogos com javascript.
Capturando eventos do teclado
Uma das formas de capturar eventos em javascript é utilizando addEventListener. O que esta função faz é associar uma função a um evento.Observe o código abaixo:
document.addEventListener('keydown', function(event) {
meuCenario.move(event.keyCode);
});
No código acima estamos associando uma função, que chamará o método "move" de "meuCenario", sempre que o evento "keydown" for acionado. Este evento é chamado cada vez que uma tecla é pressionada.
O parâmetro keyCode é um código que corresponde a tecla que foi pressionada. Utilizaremos o teste de determinados valores para tratar cada uma das teclas de seta.
Exibindo a Imagem Correspondente a Ação
Para exibir uma imagem, uma das funções do javascript é o drawImage, que desenha imagens em um canvas.A especificação da função você pode encontrar em https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage.
Aqui nos preocuparemos com seu uso em nosso caso específico. Para isso, vale observarmos as imagens com as quais estaremos trabalhando.
Estas imagens contem um personagem de 32x48 pixels, em 16 posições diferentes. Observem que as linhas (que chamaremos de linhas 0,1,2 e 3) representam 4 direções do personagem, e as colunas (que também identificaremos como 0,1,2 e 3) representam etapas do passo do personagem.
Observe agora, a seguir, o código do desenho que estaremos utilizando. É importante gastar um tempo para entender o que está sendo feito aqui:
this.ctx.drawImage(this.imagem, this.etapaPasso*TAMANHO_CELULA, this.direcaoImagem*ALTURA_PERSONAGEM, TAMANHO_CELULA, ALTURA_PERSONAGEM, this.x, this.y+10, TAMANHO_CELULA,ALTURA_PERSONAGEM);
A versão mais simples da função drawImage utiliza, além da imagem em si, dois parâmetros para definir a posição da imagem nos eixos X e Y, conforme abaixo:
void ctx.drawImage(image, dx, dy);
Aqui estamos utilizando diversos outros parâmetros, e precisaremos entender os mesmos. Para tanto, vale olharmos a especificação da função com seu número completo de parâmetros:
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);Os parâmetros de posição x e y continuam presentes, mas são respectivamente o 6º e 7º parâmetros, dx e dy, ou seja, X e Y da posição no destino.
Os parâmetros 3º, 4º e os dois últimos se referem a largura e altura da imagem, respectivamente na imagem original e no destino. No nosso caso, como não estamos redimensionando a imagem, são iguais e representam 32 (largura do personagem) e 48 (altura do personagem).
O que realmente nos interessa são os parâmetros sx e sy. Eles representam as coordenadas x e y que vamos utilizar da imagem original. Se forem 0 e 0, basicamente estamos exibindo uma imagem de 32 por 48, fazendo o corte em 32 e 48 na imagem original.
Se sx for 32, porém, estaremos exibindo não a primeira imagem do personagem, mas sim a imagem do personagem na segunda coluna. Do mesmo modo, se sy for 48, estaremos exibindo a imagem da segunda linha.
Assim sendo, podemos agora entender os parâmetros de sx e sy utilizados. Em ambos temos um índice da imagem multiplicado por 32 ou 48.
This.etapaPasso representa, assim, um número de 0 a 3 correspondendo a etapa do passo.
This.direcaoImagem representa, um número de 0 a 3 correspondendo a direção que o personagem se move.
Gerando uma Animação
Mover o personagem sempre foi relativamente simples, após sabermos capturar o teclado. Basta mantermos uma variável com a posição X e Y, e alterá-la conforme a tecla pressionada, chamando drawImage novamente.Mudar a posição do personagem agora torna-se simples também. Selecionando um número de 0 a 3 para this.direcaoImagem, temos cada uma das 4 direções de nosso desenho.
Gerar o movimento do personagem em si é mais complexo, já que exige a exibição de uma sequência de imagens. Existem diferentes abordagens para obter este resultado, mas, via de regra, todas exigirão o uso de funções com intervalo de tempo.
Observe o segmento de código em que implementamos a caminhada no exemplo:
this.semiPasso = function()
{
var posicaoInterna_Celula = ((this.etapaPasso%4)+1)/4 * TAMANHO_CELULA;
switch (this.iniciouDirecao)
{
case NORTE: this.y = this.oldy - posicaoInterna_Celula;
this.direcaoImagem = IMAGEM_COSTAS; break;
case SUL: this.y = this.oldy + posicaoInterna_Celula;
this.direcaoImagem = IMAGEM_FRENTE; break;
case LESTE: this.x = this.oldx + posicaoInterna_Celula;
this.direcaoImagem = IMAGEM_DIREITA; break;
case OESTE: this.x = this.oldx - posicaoInterna_Celula;
this.direcaoImagem = IMAGEM_ESQUERDA; break;
default:break;
}
this.etapaPasso = (this.etapaPasso+1) % 4;
if (this.etapaPasso == 0 )
{
this.iniciouPasso = false;
}
}
A função semiPasso é chamada a cada ciclo de execução do jogo, caso this.iniciouPasso seja verdadeiro. Ela é responsável por fazer o movimento do personagem da sua posição inicial até a posição final, passando pelas 4 etapas do movimento.Além de setar a imagem correspondente a direção do movimento, ela controla this.etapaPasso, variando de 0 a 3, encerra o movimento quando atinge a etapa 3, e ainda move 1/4 de posição entre uma posição definida e a outra a cada iteração.
Juntando Tudo
Estes itens acima são as funcionalidades mais complexas e/ou novas do código. Faça o download do código e abra em seu próprio computador para testá-lo. Acompanhe os cursos gratuitos e pagos de jogos em javascript da Alfamídia, que apresentam as demais funcionalidades relevantes do programa.
Assine nossa newsletter para ser avisado quando disponibilizarmos um mini-jogo contendo este recurso. Os códigos-fonte dos jogos desenvolvidos para os cursos de criação de jogos javascript da Alfamídia são disponibilizados livremente a medida que concluídos, e podem ser utilizados em qualquer desenvolvimento de jogo, comercial ou não.
terça-feira, 3 de maio de 2016
Orientação a Objetos: Herança em Javascript
No curso de Criação de Jogos Javascript, utilizamos o jogo Miaus 2.0 para explicar uma das diversas formas de implementarmos herança em Javascript, e aproveitamos para buscar demonstrar as vantagens da Programação Orientada a Objetos.
Vamos mostrar a seguir como utilizamos herança em um exemplo simplificado semelhante ao fonte do Miaus 2.0. No código fonte do Miaus 2.0 vocês podem encontrar esta mesma aplicação de herança de uma forma mais sofisticada.
Todos os elementos da cena, por sua vez, são criados a partir de funções derivadas de sprites. Isso significa que cada elemento só precisa implementar alguma função quando a mesma tem uma funcionalidade diferente da implementação básica definida na função sprites.
Adicionalmente, podemos armazenar todos os elementos da cena em um vetor único, o qual percorremos chamando as funções de desenho, ciclo, etc. Isso simplifica significativamente o desenvolvimento e manutenção do código, deixando o tratamento de como é feito o desenho, quais ações ocorrem a cada ciclo, sob responsabilidade das funções derivadas de sprite.
----------------------------------------------------------
Marque até aqui, e cole na janela de console de seu navegador
Ocorre que o Javascript utiliza prototype como um ponteiro para um conjunto de funções definidas pela função, e como ponteiro para o prototype da classe superior. Ao utilizarmos Filho1.prototype = Object.create(Pai.prototype), estamos garantindo que toda função não encontrada dentro da função Filho1, será chamada da função Pai, se existir na mesma.
O resultado, se a cópia para o console ocorreu adequadamente, é mostrado a seguir. (Também é perfeitamente possível copiar o javascript para dentro de uma página HTML):
> Pai {}
0 "esta função é igual para todos"
0 "esta é uma função do pai"
> Pai {}
1 "esta função é igual para todos"
1 "esta é uma função do pai"
> Pai {}
2 "esta função é igual para todos"
2 "esta é uma função do pai"
> Filho1 {}
3 "esta função é igual para todos"
3 "esta é uma função do filho 1"
> Filho2 {}
4 "esta função é igual para todos"
4 "esta é uma função do pai e esta é uma função do filho 2"
O código-fonte da versão 2.0 do Miaus também está disponível gratuitamente. Um link neste próprio blog permite abrir diretamente o jogo em si.
O curso Criando Jogos em Javascript, em que trabalhamos de forma mais aprofundada com orientação a objetos e o código fonte do Miaus 2.0, faz parte do Curso Online em Criação de Jogos Digitais.
Se desejar, você pode utilizar livremente o código-fonte do Miaus 2.0, seja para estudo, seja para utilizar como base para a construção de jogos gratuitos ou comerciais.
Vamos mostrar a seguir como utilizamos herança em um exemplo simplificado semelhante ao fonte do Miaus 2.0. No código fonte do Miaus 2.0 vocês podem encontrar esta mesma aplicação de herança de uma forma mais sofisticada.
Por que Utilizamos Herança no Miaus 2.0
No curso de Criação de Jogos Javascript, utilizamos uma função sprites para implementar uma série de ações comuns a todos os elementos da cena. Na função sprites temos funções para desenho (que fazem a exibição do objeto), funções de movimento, de detecção de colisões, entre outras.Todos os elementos da cena, por sua vez, são criados a partir de funções derivadas de sprites. Isso significa que cada elemento só precisa implementar alguma função quando a mesma tem uma funcionalidade diferente da implementação básica definida na função sprites.
Adicionalmente, podemos armazenar todos os elementos da cena em um vetor único, o qual percorremos chamando as funções de desenho, ciclo, etc. Isso simplifica significativamente o desenvolvimento e manutenção do código, deixando o tratamento de como é feito o desenho, quais ações ocorrem a cada ciclo, sob responsabilidade das funções derivadas de sprite.
Como Implementar Herança em Javascript
Existem diversas formas de implementarmos herança. Abaixo apresentamos a abordagem adotada no jogo Miaus 2.0, utilizando um código mínimo. Você pode testar este código diretamente no console do seu navegador. No caso do Chrome, basta seguir os passos abaixo:- Abra uma janela do Chrome
- Digite "about:blank" e dê ENTER
- Digite F12
- Selecione a aba console
- Copie e cole o código abaixo, e observe os resultados
Código-fonte demonstrando herança em javascript
Selecione a partir daqui e copie:
----------------------------------------------------------------------------
Selecione a partir daqui e copie:
----------------------------------------------------------------------------
function Pai()
{
this.funcao_comum = function()
{
return "esta função é igual para todos";
}
}
Pai.prototype.funcao_especifica = function()
{
return "esta é uma função do pai";
}
function Filho1()
{
Pai.call(this);
this.funcao_especifica = function()
{
return "esta é uma função do filho 1";
}
}
Filho1.prototype = Object.create(Pai.prototype)
function Filho2()
{
Pai.call(this);
this.funcao_especifica = function()
{
var mensagemPai = Pai.prototype.funcao_especifica.call(this);
return mensagemPai + " e esta é uma função do filho 2";
}
}
Filho2.prototype = Object.create(Pai.prototype)
{
lista = [];
lista[0] = new Pai();
lista[1] = new Pai();
lista[2] = new Pai();
lista[3] = new Filho1();
lista[4] = new Filho2();
for (i = 0; i < 5; i++) {
console.log(lista[i]);
console.log(i,lista[i].funcao_comum());
console.log(i,lista[i].funcao_especifica());
}
}
Marque até aqui, e cole na janela de console de seu navegador
Estudando o Código de Demonstração de Herança
Observe que criamos uma lista de 5 elementos, e fizemos um loop através de cada um dos elementos. Fizemos a chamada a função funcao_comum() e funcao_especifica(), com diferentes resultados. Como funcao_comum() só é implementada na função principal ela é mostrada igual em todas as chamadas do console. Já funcao_especifica() apresenta resultados diferentes em cada uma das funções.Ocorre que o Javascript utiliza prototype como um ponteiro para um conjunto de funções definidas pela função, e como ponteiro para o prototype da classe superior. Ao utilizarmos Filho1.prototype = Object.create(Pai.prototype), estamos garantindo que toda função não encontrada dentro da função Filho1, será chamada da função Pai, se existir na mesma.
O resultado, se a cópia para o console ocorreu adequadamente, é mostrado a seguir. (Também é perfeitamente possível copiar o javascript para dentro de uma página HTML):
> Pai {}
0 "esta função é igual para todos"
0 "esta é uma função do pai"
> Pai {}
1 "esta função é igual para todos"
1 "esta é uma função do pai"
> Pai {}
2 "esta função é igual para todos"
2 "esta é uma função do pai"
> Filho1 {}
3 "esta função é igual para todos"
3 "esta é uma função do filho 1"
> Filho2 {}
4 "esta função é igual para todos"
4 "esta é uma função do pai e esta é uma função do filho 2"
Como Utilizar o Código do Miaus 2.0
A primeira versão do Miaus está descrita em um curso gratuito, que você pode realizar acessando este link: Curso Básico de Jogos em Javascript.O código-fonte da versão 2.0 do Miaus também está disponível gratuitamente. Um link neste próprio blog permite abrir diretamente o jogo em si.
O curso Criando Jogos em Javascript, em que trabalhamos de forma mais aprofundada com orientação a objetos e o código fonte do Miaus 2.0, faz parte do Curso Online em Criação de Jogos Digitais.
Se desejar, você pode utilizar livremente o código-fonte do Miaus 2.0, seja para estudo, seja para utilizar como base para a construção de jogos gratuitos ou comerciais.
Links
domingo, 1 de maio de 2016
Jogo com Código Fonte para Aprender Programação - Miaus 2.0
O Javascript hoje é uma linguagem poderosa, que permite muito mais que validar formulários e criar pequenos efeitos em uma página Web.
A linguagem pode ser uma alternativa interessante para iniciar o processo de aprendizagem de lógica de programação, especialmente quando seguimos pela abordagem que a Alfamídia defende: desenvolver o domínio de uma linguagem praticando a mesma.
Assim como a leitura é fundamental para o domínio de uma língua, da mesma forma a prática contínua de programação é fundamental para dominar e ter fluência tanto em programação e lógica de programação, quanto em uma linguagem específica.
Para baixar os fontes completos do jogo, incluindo imagens, basta fazer download do jogo.
Este é apenas um esqueleto básico de um jogo de tiro, criado para fins didáticos. Utilize-o à vontade para estudar, como base para um jogo ou como desejar.
Confira o processo de construção da primeira versão do jogo, 1.0, tanto utilizando programação estruturada quanto com orientação a objetos no curso gratuito Alfamídia de jogos Javascript.
Em breve, estaremos mostrando alguns dos recursos de orientação a objetos, implementação de herança e outras funcionalidades neste portal. Todos, recursos que farão parte dos cursos Alfamídia de programação javascript utilizando jogos.
A linguagem pode ser uma alternativa interessante para iniciar o processo de aprendizagem de lógica de programação, especialmente quando seguimos pela abordagem que a Alfamídia defende: desenvolver o domínio de uma linguagem praticando a mesma.
Assim como a leitura é fundamental para o domínio de uma língua, da mesma forma a prática contínua de programação é fundamental para dominar e ter fluência tanto em programação e lógica de programação, quanto em uma linguagem específica.
Jogos nos Cursos Online Alfamídia de Programação
Uma das abordagens dos cursos online Alfamídia, especialmente os voltados para adolescentes e os cursos para desenvolvedores profissionais de jogos, é o desenvolvimento de jogos, tanto em javascript, quanto em plataformas profissionais de desenvolvimento de jogos, desde GameMaker a Unity e Unreal.Jogo em Javascript Orientado a Objetos
Confira a nova versão, 2.0, do jogo em javascript Miaus, disponibilizada hoje, um dos jogos básicos usados no ensino de javascript, o MIAUS (mutantes invasores alienígenas do universo sideral).Para baixar os fontes completos do jogo, incluindo imagens, basta fazer download do jogo.
Este é apenas um esqueleto básico de um jogo de tiro, criado para fins didáticos. Utilize-o à vontade para estudar, como base para um jogo ou como desejar.
Confira o processo de construção da primeira versão do jogo, 1.0, tanto utilizando programação estruturada quanto com orientação a objetos no curso gratuito Alfamídia de jogos Javascript.
Aprendendo Programação Orientada a Objetos
Em breve, estaremos mostrando alguns dos recursos de orientação a objetos, implementação de herança e outras funcionalidades neste portal. Todos, recursos que farão parte dos cursos Alfamídia de programação javascript utilizando jogos.
Links
quarta-feira, 20 de abril de 2016
O que é lógica de programação
O objetivo deste texto é auxiliar nosso aluno a ter uma compreensão básica sobre como construir programas de computador e apresentar a abordagem utilizada nos cursos online de lógica de programação da Alfamídia.
Aproveite e confira os cursos online Alfamídia de Desenvolvimento Web e Mobile, Desenvolvimento de Software e Programação Javascript.
Temos aqui o desafio de apresentar alguns conceitos fundamentais para criação de programas, assumindo que o leitor não tem nenhum conhecimento prévio na área.
Ao mesmo tempo, é nosso objetivo diminuir um pouco as confusões e distorções presentes na Internet em relação ao que é lógica de programação e esclarecer as principais abordagens adotadas para seu ensino.
Começaremos, assim, buscando um entendimento sobre o que é um programa.
Você já pensou em como você decide o que vai fazer a cada instante? O que você faz ao levantar? Como toma um banho?
Na literatura, é comum encontrarmos um exemplo de um programa em uma comparação com os passos de uma atividade simples, como tomar banho. São enumerados passos em sequencia, como tirar a roupa, ligar o chuveiro, etc.
Sob certo aspecto, pode ser considerado um exemplo ruim, ao transmitir a falsa ideia que os seres humanos têm um programa que define suas ações. Tanto seres humanos quanto animais tomam suas decisões através de uma complexa interação entre neurônios, sem seguir nenhum programa escrito em nenhum lugar.
No entanto, para se comunicar com outros seres humanos, nós utilizamos uma linguagem. Através dela interagimos, trocamos informações, compartilhamos decisões e, muitas vezes, damos ordens ou passamos instruções para serem seguidas.
Ao desenvolver os primeiros computadores, ficou claro que precisávamos de algo parecido para que eles executassem determinada função. Ou seja, precisávamos de uma forma de passar instruções para que eles executassem determinada tarefa.
Assim, temos aqui aquilo que podemos definir como um programa:
Linguagens naturais são aquelas linguagens que surgiram naturalmente, de forma não premeditada, e são utilizadas para a comunicação entre seres humanos. Elas são extremamente poderosas e praticamente todo ser humano domina pelo menos uma delas e a utiliza diariamente para se comunicar com as pessoas ao seu redor.
Assim sendo, é válido o seguinte questionamento: por que não utilizar uma língua natural para nos comunicarmos e passarmos instruções para um computador? Em outras palavras, por que o português (ou o inglês) não é utilizado para escrever os programas de computador?
Adicionalmente, adotando uma língua natural, o português, por exemplo, não estaríamos tornando todos os falantes da língua, automaticamente, em programadores?
Existem três questões fundamentais aqui, e vamos analisar uma a uma:
Pode parecer estranho em um primeiro momento, já que qualquer criança consegue falar sua língua materna, mas línguas naturais são extremamente complexas.
Basta observar nosso esforço para aprender uma nova linguagem, especialmente se for uma linguagem que não tem nenhuma proximidade com a língua que falamos desde criança. É comum, inclusive, que adultos jamais adquiram pleno domínio de novas línguas naturais, mesmo praticando diariamente.
Apenas recentemente temos conseguido desenvolver sistemas com a capacidade de interpretar linguagens naturais – ainda que de forma limitada – possibilitando, por exemplo, a tradução automática entre duas línguas.
Em outras palavras, programar utilizando linguagem natural era impossível no passado pelo simples fato que os computadores não eram capazes de compreender sequer uma frase em língua natural.
A limitação técnica para interpretar linguagens naturais, porém, é apenas um dos problemas desta abordagem.
Na verdade linguagens naturais nem sequer foram criadas, no sentido de alguém ter definido as mesmas. Elas evoluíram naturalmente, sem nenhum planejamento prévio.
Assim sendo, elas não foram feitas para especificar comandos de forma precisa. Não que isso seja em si impossível. Pode-se definir uma forma de, usando uma linguagem natural, sermos sempre precisos no que falamos. Uma receita, por exemplo, pode ter comandos bastante precisos, como “coloque 3,5 gramas de sal no recipiente e coloque no fogo, a temperatura de 83,7 graus, deixando por 5 minutos e 15 segundos”.
Entretanto, o fato é que as linguagens naturais não foram feitas para isso. Para garantirmos a precisão, temos que tomar inúmeros cuidados de não usar qualquer comando impreciso (quantas receitas não dizem apenas colocar um punhado de sal, e deixar no fogo por um pouco de tempo).
No fundo, teríamos que reaprender a utilizar nossa língua natural para um fim completamente diferente daquele para o qual ela é normalmente utilizada. Teríamos, assim, basicamente o mesmo trabalho que temos ao aprender uma língua nova, e ainda estaríamos utilizando uma linguagem que não foi construída para programar computadores.
Programar não é fácil. Na verdade, é tão difícil que muitas pessoas desistem muito antes de chegar ao ponto em que programar se tornaria fácil para elas, e abrem mão do que poderia ser uma carreira promissora.
Mas, e esta é a questão fundamental, não é a linguagem que torna a programação difícil. É a capacidade de desenvolver programas a questão realmente desafiadora.
Toda linguagem construída é normalmente muito mais fácil de aprender que uma linguagem natural (na verdade quase todas, mas de Klingon a Piet, também podemos encontrar exceções a esta regra). Em particular, linguagens de programação foram especificamente criadas para que pessoas possam, o mais facilmente possível, criar programas.
A verdadeira dificuldade não está nas linguagens, mas na capacidade de desenvolvermos um programa de computador, sendo uma linguagem de programação apenas o instrumento que iremos utilizar para isso. Isso nos leva a uma polêmica entre ensinar “lógica de programação” versus ensinar direto uma linguagem de programação, mas chegaremos em breve a esta questão.
Utilizar uma linguagem construída para tal fim tem sido uma solução mais viável e efetiva de desenvolvermos programas de computador, ou seja, conjuntos de instruções que dizem o que o computador deve fazer.
Estas linguagens desenvolvidas para construir programas são chamadas de linguagens de programação. Já foram desenvolvidas inúmeras destas linguagens, algumas muito semelhantes entre si, outras completamente diferentes. Algumas foram desenvolvidas para objetivos muito específicos, enquanto outras buscam atender uma ampla gama de situações.
Apesar de cada linguagem ter suas particularidades, linguagens de programação podem ser agrupadas de acordo com diferentes critérios, sendo que possivelmente o mais relevante deles é o “paradigma” utilizado.
Aqui temos um conceito complexo de entendermos nesta etapa do aprendizado, por isso não vamos nos aprofundar nele, apenas mencioná-lo para podermos apresentar um conceito adequado de lógica de programação. Existem diferentes paradigmas de programação, por exemplo a programação funcional, em que um programa é tratado como uma avaliação de funções matemáticas.
O que chamamos de “Lógica de Programação” abrange um conjunto de conceitos que são utilizados na grande maioria das linguagens utilizadas comercialmente nos dias de hoje.
Existem outras formas de desenvolver programas, utilizando linguagens que adotam outros paradigmas e que, seja por questões comerciais, seja por questões técnicas, neste momento não são tão populares quanto as linguagens que se baseiam nos conceitos vistos em lógica de programação.
Especificamente, hoje praticamente todas as linguagens utilizadas comercialmente são linguagens procedimentais ou linguagens orientadas a objetos. Em ambas, os conceitos de “lógica de programação” são a base para a construção de programas.
Embora não seja exatamente verdade que Lógica de Programação é essencial para desenvolvermos programas - como vimos, existem outros paradigmas que não se baseiam nos conceitos de lógica de programação – ela é essencial quando falamos da maioria das linguagens de mercado.
Existem aqui duas grandes escolas ou linhas de pensamento no que diz respeito a ensinar lógica de programação.
Nessa linha de pensamento, ensinar uma linguagem sem ensinar a lógica de programação é inverter a ordem natural do ensino. Sem nunca aprender lógica de programação, o aluno se tornará um profissional capaz de dominar uma linguagem de programação, mas incapaz de desenvolver programas, ou pelo menos terá muito mais dificuldade de se desenvolver na área.
Alguns também argumentam que o aluno se vê obrigado a aprender ao mesmo tempo uma nova linguagem e uma nova maneira de pensar. Preso a necessidade de dominar uma nova sintaxe, o aluno não tem como se concentrar no aprendizado da lógica em si que é utilizada no desenvolvimento dos programas.
Ensinar lógica de programação, sem ter algum tipo de linguagem de programação, porém, é quase impossível. Nesta linha de ensino, isso é resolvido com o uso de dois instrumentos principais, na verdade duas linguagens: fluxogramas e pseudocódigo.
Fluxogramas nada mais são que programas escritos em uma linguagem de programação, uma linguagem visual, em que os comandos são representados por figuras e setas.
Pseudocódigo, da mesma forma, é uma linguagem de programação, apenas uma simplificada e baseada no português, que, a rigor, não é necessariamente diferente de tantas linguagens de programação.
Defendendo o caminho oposto, existe a abordagem do ensino de lógica ser feito através de uma linguagem comercial de programação.
Neste caso, sim, estaremos ensinando lógica e uma linguagem ao mesmo tempo.
Pense na abordagem do ensino de uma língua estrangeira... Para aprender inglês, inicialmente é mostrada a gramática da linguagem, as regras, vocabulário, para só depois de tudo plenamente dominado, começarmos a praticar a linguagem em si? Quão chato e quão difícil seria aprendermos uma nova linguagem desta forma?
Pense agora no ensino da linguagem sendo feito em paralelo com seu uso. Começamos com frases simples, que vamos praticando, e sofisticando cada vez mais.
A chave aqui é prática. Prática e interatividade.
Nesta abordagem, adotada pela Alfamídia em seus cursos, a prática da lógica de programação é contínua e segue junto com o ensino da linguagem.
Começamos com a popular aplicação “Ola Mundo”. Simplesmente ensinamos o mínimo – às vezes apenas 1 ou 2 conceitos e recursos da linguagem – para então fazermos nossa primeira aplicação, uma aplicação que exibe para o usuário a frase “Ola Mundo”.
Os passo s seguintes vão apresentando cada vez mais recursos. Talvez uma forma do aluno entrar com algum comando, o que já nos permite, por exemplo, criar um programa em que o usuário escolhe se sua mensagem será “Ola Mundo” ou “Tchau Mundo”. Qual o próximo passo? Talvez exibir a mensagem um certo número de vezes, ou fazer uma operação matemática qualquer.
Nesta abordagem, a prática é fundamental, e uma prática já no mundo real, já utilizando linguagens que no futuro o aluno utilizará profissionalmente para desenvolver seus programas.
Falamos do que é um programa (um conjunto de instruções), mencionamos que existe uma variedade de abordagens utilizadas pelas linguagens de programação (diferentes paradigmas), e comentamos da importância da Lógica de Programação para a grande maioria das linguagens.
Falamos então das duas principais abordagens de ensino, defendendo aquela que acreditamos ser o caminho mais adequado.
Resta-nos agora falar da forma como você, como aluno, irá aprender a programar, e é algo muito simples, que se resume em uma frase: um passo de cada vez.
Ou seja, assim que o primeiro conceito básico da linguagem é apresentado e aplicado – nosso exemplo da aplicação “Ola Mundo”, pratique. E esta é a grande vantagem de aprender lógica de programação diretamente em uma linguagem: pratique o “Ola Mundo”, descubra tudo que você pode fazer. Mude a mensagem, exiba ela 2, 3 vezes. Após, quando forem mostradas variáveis, utilize-as para montar uma mensagem mais complexa. Quando forem mostrados recursos que permitem repetir uma ação várias vezes, cria uma repetição contínua da mensagem de “Ola Mundo”.
Em geral, o aluno que encontra dificuldades no entendimento de lógica de programação tenta absorver e aplicar um conteúdo muito grande de uma só vez. Através do ensino simultâneo com a linguagem, não há esta necessidade. Você pode praticar cada novo conceito tanto quanto necessário até conseguir incorporá-lo com naturalidade.
Com a prática, a solução de problemas mais e mais complexos vai se tornando mais natural, a medida que você ganha desenvoltura no uso dos recursos da linguagem e da lógica de programação.
Aproveite e confira os cursos online Alfamídia de Desenvolvimento Web e Mobile, Desenvolvimento de Software e Programação Javascript.
Aproveite e confira os cursos online Alfamídia de Desenvolvimento Web e Mobile, Desenvolvimento de Software e Programação Javascript.
Temos aqui o desafio de apresentar alguns conceitos fundamentais para criação de programas, assumindo que o leitor não tem nenhum conhecimento prévio na área.
Ao mesmo tempo, é nosso objetivo diminuir um pouco as confusões e distorções presentes na Internet em relação ao que é lógica de programação e esclarecer as principais abordagens adotadas para seu ensino.
Começaremos, assim, buscando um entendimento sobre o que é um programa.
O que é um programa?
Você já pensou em como você decide o que vai fazer a cada instante? O que você faz ao levantar? Como toma um banho?
Na literatura, é comum encontrarmos um exemplo de um programa em uma comparação com os passos de uma atividade simples, como tomar banho. São enumerados passos em sequencia, como tirar a roupa, ligar o chuveiro, etc.
Sob certo aspecto, pode ser considerado um exemplo ruim, ao transmitir a falsa ideia que os seres humanos têm um programa que define suas ações. Tanto seres humanos quanto animais tomam suas decisões através de uma complexa interação entre neurônios, sem seguir nenhum programa escrito em nenhum lugar.
No entanto, para se comunicar com outros seres humanos, nós utilizamos uma linguagem. Através dela interagimos, trocamos informações, compartilhamos decisões e, muitas vezes, damos ordens ou passamos instruções para serem seguidas.
Ao desenvolver os primeiros computadores, ficou claro que precisávamos de algo parecido para que eles executassem determinada função. Ou seja, precisávamos de uma forma de passar instruções para que eles executassem determinada tarefa.
Assim, temos aqui aquilo que podemos definir como um programa:
um conjunto de instruções que iremos fornecer para um computador, para que ele execute determinada tarefa.
Por que um programa não é apenas um texto em linguagem natural?
Linguagens naturais são aquelas linguagens que surgiram naturalmente, de forma não premeditada, e são utilizadas para a comunicação entre seres humanos. Elas são extremamente poderosas e praticamente todo ser humano domina pelo menos uma delas e a utiliza diariamente para se comunicar com as pessoas ao seu redor.
Assim sendo, é válido o seguinte questionamento: por que não utilizar uma língua natural para nos comunicarmos e passarmos instruções para um computador? Em outras palavras, por que o português (ou o inglês) não é utilizado para escrever os programas de computador?
Adicionalmente, adotando uma língua natural, o português, por exemplo, não estaríamos tornando todos os falantes da língua, automaticamente, em programadores?
Existem três questões fundamentais aqui, e vamos analisar uma a uma:
1. Compreender uma língua natural é algo extremamente complexo e, até recentemente, muito além da capacidade dos computadores.
Pode parecer estranho em um primeiro momento, já que qualquer criança consegue falar sua língua materna, mas línguas naturais são extremamente complexas.
Basta observar nosso esforço para aprender uma nova linguagem, especialmente se for uma linguagem que não tem nenhuma proximidade com a língua que falamos desde criança. É comum, inclusive, que adultos jamais adquiram pleno domínio de novas línguas naturais, mesmo praticando diariamente.
Apenas recentemente temos conseguido desenvolver sistemas com a capacidade de interpretar linguagens naturais – ainda que de forma limitada – possibilitando, por exemplo, a tradução automática entre duas línguas.
Em outras palavras, programar utilizando linguagem natural era impossível no passado pelo simples fato que os computadores não eram capazes de compreender sequer uma frase em língua natural.
A limitação técnica para interpretar linguagens naturais, porém, é apenas um dos problemas desta abordagem.
2. Linguagens naturais não foram criadas para especificar comandos de forma clara e precisa.
Na verdade linguagens naturais nem sequer foram criadas, no sentido de alguém ter definido as mesmas. Elas evoluíram naturalmente, sem nenhum planejamento prévio.
Assim sendo, elas não foram feitas para especificar comandos de forma precisa. Não que isso seja em si impossível. Pode-se definir uma forma de, usando uma linguagem natural, sermos sempre precisos no que falamos. Uma receita, por exemplo, pode ter comandos bastante precisos, como “coloque 3,5 gramas de sal no recipiente e coloque no fogo, a temperatura de 83,7 graus, deixando por 5 minutos e 15 segundos”.
Entretanto, o fato é que as linguagens naturais não foram feitas para isso. Para garantirmos a precisão, temos que tomar inúmeros cuidados de não usar qualquer comando impreciso (quantas receitas não dizem apenas colocar um punhado de sal, e deixar no fogo por um pouco de tempo).
No fundo, teríamos que reaprender a utilizar nossa língua natural para um fim completamente diferente daquele para o qual ela é normalmente utilizada. Teríamos, assim, basicamente o mesmo trabalho que temos ao aprender uma língua nova, e ainda estaríamos utilizando uma linguagem que não foi construída para programar computadores.
3. Linguagens construídas são fáceis. Não é na linguagem o problema para desenvolver programas de computador.
Programar não é fácil. Na verdade, é tão difícil que muitas pessoas desistem muito antes de chegar ao ponto em que programar se tornaria fácil para elas, e abrem mão do que poderia ser uma carreira promissora.
Mas, e esta é a questão fundamental, não é a linguagem que torna a programação difícil. É a capacidade de desenvolver programas a questão realmente desafiadora.
Toda linguagem construída é normalmente muito mais fácil de aprender que uma linguagem natural (na verdade quase todas, mas de Klingon a Piet, também podemos encontrar exceções a esta regra). Em particular, linguagens de programação foram especificamente criadas para que pessoas possam, o mais facilmente possível, criar programas.
A verdadeira dificuldade não está nas linguagens, mas na capacidade de desenvolvermos um programa de computador, sendo uma linguagem de programação apenas o instrumento que iremos utilizar para isso. Isso nos leva a uma polêmica entre ensinar “lógica de programação” versus ensinar direto uma linguagem de programação, mas chegaremos em breve a esta questão.
Lógica de Programação e Paradigmas de Programação
Utilizar uma linguagem construída para tal fim tem sido uma solução mais viável e efetiva de desenvolvermos programas de computador, ou seja, conjuntos de instruções que dizem o que o computador deve fazer.
Estas linguagens desenvolvidas para construir programas são chamadas de linguagens de programação. Já foram desenvolvidas inúmeras destas linguagens, algumas muito semelhantes entre si, outras completamente diferentes. Algumas foram desenvolvidas para objetivos muito específicos, enquanto outras buscam atender uma ampla gama de situações.
Apesar de cada linguagem ter suas particularidades, linguagens de programação podem ser agrupadas de acordo com diferentes critérios, sendo que possivelmente o mais relevante deles é o “paradigma” utilizado.
Aqui temos um conceito complexo de entendermos nesta etapa do aprendizado, por isso não vamos nos aprofundar nele, apenas mencioná-lo para podermos apresentar um conceito adequado de lógica de programação. Existem diferentes paradigmas de programação, por exemplo a programação funcional, em que um programa é tratado como uma avaliação de funções matemáticas.
O que chamamos de “Lógica de Programação” abrange um conjunto de conceitos que são utilizados na grande maioria das linguagens utilizadas comercialmente nos dias de hoje.
Existem outras formas de desenvolver programas, utilizando linguagens que adotam outros paradigmas e que, seja por questões comerciais, seja por questões técnicas, neste momento não são tão populares quanto as linguagens que se baseiam nos conceitos vistos em lógica de programação.
Especificamente, hoje praticamente todas as linguagens utilizadas comercialmente são linguagens procedimentais ou linguagens orientadas a objetos. Em ambas, os conceitos de “lógica de programação” são a base para a construção de programas.
Como Aprender Lógica de Programação
Embora não seja exatamente verdade que Lógica de Programação é essencial para desenvolvermos programas - como vimos, existem outros paradigmas que não se baseiam nos conceitos de lógica de programação – ela é essencial quando falamos da maioria das linguagens de mercado.
Existem aqui duas grandes escolas ou linhas de pensamento no que diz respeito a ensinar lógica de programação.
Lógica antes da Linguagem
Nessa linha de pensamento, ensinar uma linguagem sem ensinar a lógica de programação é inverter a ordem natural do ensino. Sem nunca aprender lógica de programação, o aluno se tornará um profissional capaz de dominar uma linguagem de programação, mas incapaz de desenvolver programas, ou pelo menos terá muito mais dificuldade de se desenvolver na área.
Alguns também argumentam que o aluno se vê obrigado a aprender ao mesmo tempo uma nova linguagem e uma nova maneira de pensar. Preso a necessidade de dominar uma nova sintaxe, o aluno não tem como se concentrar no aprendizado da lógica em si que é utilizada no desenvolvimento dos programas.
Ensinar lógica de programação, sem ter algum tipo de linguagem de programação, porém, é quase impossível. Nesta linha de ensino, isso é resolvido com o uso de dois instrumentos principais, na verdade duas linguagens: fluxogramas e pseudocódigo.
Fluxogramas nada mais são que programas escritos em uma linguagem de programação, uma linguagem visual, em que os comandos são representados por figuras e setas.
Pseudocódigo, da mesma forma, é uma linguagem de programação, apenas uma simplificada e baseada no português, que, a rigor, não é necessariamente diferente de tantas linguagens de programação.
Lógica Através da Linguagem
Defendendo o caminho oposto, existe a abordagem do ensino de lógica ser feito através de uma linguagem comercial de programação.
Neste caso, sim, estaremos ensinando lógica e uma linguagem ao mesmo tempo.
Pense na abordagem do ensino de uma língua estrangeira... Para aprender inglês, inicialmente é mostrada a gramática da linguagem, as regras, vocabulário, para só depois de tudo plenamente dominado, começarmos a praticar a linguagem em si? Quão chato e quão difícil seria aprendermos uma nova linguagem desta forma?
Pense agora no ensino da linguagem sendo feito em paralelo com seu uso. Começamos com frases simples, que vamos praticando, e sofisticando cada vez mais.
A chave aqui é prática. Prática e interatividade.
Nesta abordagem, adotada pela Alfamídia em seus cursos, a prática da lógica de programação é contínua e segue junto com o ensino da linguagem.
Começamos com a popular aplicação “Ola Mundo”. Simplesmente ensinamos o mínimo – às vezes apenas 1 ou 2 conceitos e recursos da linguagem – para então fazermos nossa primeira aplicação, uma aplicação que exibe para o usuário a frase “Ola Mundo”.
Os passo s seguintes vão apresentando cada vez mais recursos. Talvez uma forma do aluno entrar com algum comando, o que já nos permite, por exemplo, criar um programa em que o usuário escolhe se sua mensagem será “Ola Mundo” ou “Tchau Mundo”. Qual o próximo passo? Talvez exibir a mensagem um certo número de vezes, ou fazer uma operação matemática qualquer.
Nesta abordagem, a prática é fundamental, e uma prática já no mundo real, já utilizando linguagens que no futuro o aluno utilizará profissionalmente para desenvolver seus programas.
Como Aprender a Programar
Falamos do que é um programa (um conjunto de instruções), mencionamos que existe uma variedade de abordagens utilizadas pelas linguagens de programação (diferentes paradigmas), e comentamos da importância da Lógica de Programação para a grande maioria das linguagens.
Falamos então das duas principais abordagens de ensino, defendendo aquela que acreditamos ser o caminho mais adequado.
Resta-nos agora falar da forma como você, como aluno, irá aprender a programar, e é algo muito simples, que se resume em uma frase: um passo de cada vez.
Ou seja, assim que o primeiro conceito básico da linguagem é apresentado e aplicado – nosso exemplo da aplicação “Ola Mundo”, pratique. E esta é a grande vantagem de aprender lógica de programação diretamente em uma linguagem: pratique o “Ola Mundo”, descubra tudo que você pode fazer. Mude a mensagem, exiba ela 2, 3 vezes. Após, quando forem mostradas variáveis, utilize-as para montar uma mensagem mais complexa. Quando forem mostrados recursos que permitem repetir uma ação várias vezes, cria uma repetição contínua da mensagem de “Ola Mundo”.
Em geral, o aluno que encontra dificuldades no entendimento de lógica de programação tenta absorver e aplicar um conteúdo muito grande de uma só vez. Através do ensino simultâneo com a linguagem, não há esta necessidade. Você pode praticar cada novo conceito tanto quanto necessário até conseguir incorporá-lo com naturalidade.
Com a prática, a solução de problemas mais e mais complexos vai se tornando mais natural, a medida que você ganha desenvoltura no uso dos recursos da linguagem e da lógica de programação.
Aproveite e confira os cursos online Alfamídia de Desenvolvimento Web e Mobile, Desenvolvimento de Software e Programação Javascript.
Assinar:
Postagens (Atom)