Prof. Douglas Frari - mobile programming

PvP path no Dark Souls 3 (o caminho do Player vs Player)

noreply@blogger.com (Anonymous) — Mon, 19 Sep 2016 13:03:00 +0000

Tribute to game Dark Souls 3 showing the way that the Players will pass over the PvP fights.

Homenagem do jogo Dark Souls 3 mostrando o caminho do jogador tem no PvP.*

#2.(1/2) - Como baixar o projeto da vídeo-aula usando o GIT

noreply@blogger.com (Anonymous) — Mon, 07 Sep 2015 18:08:00 +0000

Criei um tutorial disponível no meu outro blog (medium) como as explicações detalhadas:

Tutorial: como baixar o projeto da vídeo-aula usando o GIT

Nova série no Youtube

noreply@blogger.com (Anonymous) — Sun, 30 Aug 2015 22:50:00 +0000

"Criei uma nova série no meu canal do Youtube: Tutorial Rápido — como fazer. A ideia é produzir vídeos com simplicidade e melhor qualidade. Para isso, vou testar um novo formato, que ainda estou avaliando, mas que me parece interessante para quem assiste e para quem produz. Vou comentar um pouco sobre essa ideia e minha experiência de produtor de conteúdo para Youtube."

O texto na íntegra pode ser lido na página que vai carregar abaixo.

Nova série no Youtube

Caso não carregue, o link pode ser acessado aqui:
https://medium.com/@douglasddf/nova-s%C3%A9rie-no-youtube-fac05c7fbb82

projeto iOS: Language Localization

noreply@blogger.com (Anonymous) — Thu, 27 Aug 2015 22:45:00 +0000

Aplicativos estão cada vez mais aptos a serem utilizados globalmente. No entanto, para alcançar esse mercado, os envolvidos na produção do software precisam se atentar à necessidade de internacionalizar os textos que aparecerão na interface. A proposta deste tutorial é demonstrar uma solução que tenho adotado em projetos iOS.

Você poderá ler o artigo completo acessando o link abaixo.

Language Localization em projetos iOS

Originalmente publicado aqui.

Criando um projeto open-source: iOS-Check-Permission

noreply@blogger.com (Anonymous) — Thu, 06 Aug 2015 21:41:00 +0000

No dia a dia do programador é bastante comum trabalhar com diversos algoritmos para resolver problemas específicos da empresa ou do cliente. Muitos dos programas as vezes ficam esquecidos quando o projeto acaba. Uma forma de preservar as soluções de código desenvolvidos é criar um ou mais componentes e publicá-los em comunidades abertas. Vou descrever uma experiência de publicar um componente no Github.com.

O componente iOS-Check-Permission

Criei um componente para permitir as aplicações em iOS solicitarem a permissão de uso dos seguintes recursos nativos do celular de forma transparente a o mais simples possível:

Calendar (permitir acessar o calendário do usuário para marcar eventos)
Reminder (permitir usar o recurso de agendamentos de lembretes)
Gallery (ter acesso as fotos ou vídeos da galeria do aparelho)
Location (para usar o GPS obtendo a localização atual)

iOS-Check-Permission [1]

Ouça também o podcast:

Por que criar um componente/biblioteca?

Havia necessidade de escrever um código para ter acesso a galeria de imagens do usuário usando a tecnologia do iOS, bem como, a necessidade de obter a permissão da Câmera do celular para tirar fotos com o iPhone. Um código inicial foi escrito para fazer isso funcionar usando a linguagem Objective-C. Porém, percebi que poderíamos reusar essa solução em outros projetos, caso isso fosse necessário.

No início, havia uma classe utilitária para ser usada dentro do projeto, com a solução de código que permitia reusar o recurso para usar a câmera nativa sempre que fosse necessária. Esse recurso requer solicitar autorização do usuário para poder ser utilizado no aparelho. Com o andar do projeto, algumas outras permissões foram sendo necessárias, pois a medida que novos recursos foram sendo requisitados, tais como uso da galeria de imagens do iPhone e do recurso de lembretes (Reminders), também precisei de uma solução parecida com o que já tinha feito.

Então venho a ideia de componentizar a atual classe utilitária para se tornar um componente reusável. Embora essa ideia não tenha nada de sofisticado, para se tornar um componente na prática é preciso decidir onde vai colocar isso. Poderia ser, por exemplo, no próprio repositório do projeto, dentro da empresa que você trabalha.

Mas será que outras pessoas iriam encontrar?
Será que os próprios colegas da empresa em questão saberiam que isso está ali disponível?

A prática mostra que não. E que seria preciso colocar o componente em outro repositório, preferencialmente que seja popular e conhecido entre a comunidade de usuários de desenvolvedores. Assim, pensei e resolvi colocar no repositório Github, cujo nome do componente se tornou

iOS-Check-Permission - https://github.com/douglasddf/iOS-Check-Permission

O resultado foi que encontrei um pretexto para continuar fazendo o que mais gosto: programar.

Após alguns resultados positivos, surgiu a necessidade de fazer um exemplo de uso para demonstrar as funcionalidades básicas do componente, bem como, já servir de base para outros entenderem como poderia ser usado. O vídeo abaixo foi feito para ilustrar sem que o desenvolvedor precise instalar as ferramentas Xcode.

Para colocar no GITHUB foi necessária criar uma conta e ler os guias para entender como enviar o código para lá. Como o próprio nome diz, GIT + HUB se baseia na ferramenta do GIT {já escrevi outro post aqui sobre ele}. Outros conhecimentos foram necessários, como escrever um pequeno texto em English para descrever o que o componente faz. Afinal, se não explicar, como os outros vão saber para que serve?

Outro ponto que posso destacar é que no processo de estar fazendo, surgiu a demanda de fazer a biblioteca suportar o recurso de Localização (Location). No entanto, para minha surpresa, a forma de fazer isso funcionar não se parecia em nada com a abordagem dos outros recursos. Ou seja, surge um novo desafio pessoal. :)

Além disso, após já ter publicada a biblioteca no repositório e ter avisado os colegas, vem aquele amigo e diz que ainda não está bom o suficiente, precisa suportar o COCOAPOD. Mais um desafio que surge e que você não previu antes, mas que passou a ser importante para que o componente possa ter maior alcance.

Então você percebe que não tem tempo. O que você faz?

A relação do tempo têm haver com a priorização que queremos dar as tarefas diárias. Programar é muito bom quando se faz com prazer, logo, posso arrumar tempo para isso no dia a dia. Pois quanto maior for o desafio, maior será o seu aprendizado. Mas não se sabe ou não se aprende somente na teoria, mas na prática e gerando resultados que vai prover as lições para nos mostrar as respostas.

Resultados só vem após tentar, fazer e conseguir.

Compartilhar uma solução na comunidade de open-source, tal como o github, faz com que haja uma preocupação extra com a qualidade do código final. Mas para mim, o mais legal é ter o sentimento de contribuir com a comunidade e porque não: contribuir com a humanidade, do seu jeito, da sua forma, com seu esforço.

Pode não ter dinheiro envolvido, mas tem a causa de contribuir que essa, de uma forma desconhecida, há de se ter um benefício a longo prazo a você e a muitos outros.

Memory Leak / vazamento de memória na programação

noreply@blogger.com (Anonymous) — Thu, 02 Jul 2015 02:42:00 +0000

Recentemente me deparei com problemas de memory leak no desenvolvimento de uma aplicação para iOS (iPhone/iPad) e foi difícil de resolver e achar a causa do problema. Comentarei um pouco sobre isso.

Memória é um recurso excelente para fazer nossos aplicativos rodarem de acordo com o esperado. Porém, quando falta memória o aplicativo pode fechar inesperadamente. Também conhecido como CRASH.

Em aplicações iOS, que são baseados em linguagem C, trabalhamos com as linguagens Objective-c ou Swift, que normalmente fazem uso de ponteiros e acesso a endereços de memória. Qualquer "vacilada" ou descuido durante a programação, levamos a erros que geram CRASHs.

Memory leak é um tipo de erro muito indesejado e são problemas de memória alocada, mas que na prática, não liberada, ficando acumulada e retida (presa). Assim, se deixar vazamento de memória em algum ponto do programa, o acesso consecutivo a esse ponto vai gerar acúmulo de recursos de memória. O problema ocorre porque o SO não consegue desalocar esse recurso porque ficou retido.

Há várias possíveis razões:

variáveis alocadas ficam referenciadas em algum ponto durante a execução do algoritmo;
recursos que consomem mais memória podem ficar retidos em processos Zombis;
componentes da plataforma consomem recursos e não são fortemente liberados (ex. UIImagePickerController - iOS / manipular a câmera que tira as fotos possui memory leak);
uso de propriedades de componentes visuais com tipo "strong" pode reter memória (em iOS/MacOS...);
uso de bibliotecas ou modificações nesses componentes sem analisar essa questão, etc.

Como evitar vazamento de memória

Uma forma interessante é utilizar ferramentas de Profiling. No iOS temos o "instruments", que é um conjunto de ferramentas que podem ser usadas para analisar a execução do programa para avaliar graficamente e os dados estatísticos, onde estão os pontos errados. Identificar esses pontos permitirá avaliar o código melhor e tomar decisões para corrigir as falhas.

Uma forma eficiente que aprendi, quando temos leaks identificados, mas sem saber a causa, pode-se ir comentando funcionalidades chaves e rodar novamente o Profiling. Se ocorrer mudanças significativas para melhor, significa que o provável memory leak está no ponto comentado, caso contrário, continue comentando códigos e rodando o analisador novamente até que encontre o "vilão".

GitHub.com e o GIT

noreply@blogger.com (Anonymous) — Sat, 30 May 2015 12:22:00 +0000

O GitHub é um serviço de hospedagem de código público ou privado, que usa a tecnologia do GIT para a gestão dos códigos fontes. A tecnologia GIT é um sistema de controle de versão distribuído. Oferecer a infraestrutura do GIT como um serviço transparente aos desenvolvedores, de nível de escala mundial, através de um modelo de negócio pago ou gratuito, foi, ao meu ver, a grande sacada que tornou o GITHUB.com, um dos mais populares serviços oferecidos aos programadores.

Gravei um podcast para falar dele. Ouça se tiver interesse:

Durante o podcast, não pude explicar como usar o GIT, apenas citei alguns exemplos básicos. Vou sugerir que você procure um tutorial na internet. Eu indico o meu tutorial preferido logo abaixo, mas estou ciente que para aprender a usar o GIT, você precisará ir mais afundo.

Veja mais:

Guia Prático - sem complicação!
Set Up Git (do próprio GitHub)

Algoritmos e Lógica de programação: conhecimento essencial!

noreply@blogger.com (Anonymous) — Wed, 11 Mar 2015 10:40:00 +0000

As linguagens de programação são excelentes formas de aprender a programar. Mas para se aventurar na programação é preciso do conhecimento básico e essencial: ALGORITMO.

Neste podcast falo sobre os Algoritmos e as suas formas de representações. Além do entendimento dos 4 comandos básicos essenciais: Entrada de dados; Saída de Dados; Processamento e Decisão.

E para não esquecer de nada: o que a lógica de programação tem haver com algoritmos e a programação?

Além disso, comentamos, em linhas gerais, sobre como as Linguagens de Programação fazem para converter os Algoritmos em linguagem de máquina, através das ferramentas Compiladores.

Dicas sobre programação para dispositivos móveis + podcast

noreply@blogger.com (Anonymous) — Fri, 06 Mar 2015 10:27:00 +0000

Algumas dicas pessoais sobre o mercado de desenvolvimento de aplicativos móveis para #Android #iOS e#WindowsPhone.

Como começar, vantagens e desvantagens de cada tecnologia. Além disso, um relato pessoal e verdadeiro, de onde está o custo principal envolvido hoje em dia:

na construção da experiência de uso do aplicativo ou game e menos no esforço da codificação em si.

Links relacionados:

Desenvolvimento #iOS usando Objective-C e Swift / Storyboard vs. XIB file ?

noreply@blogger.com (Anonymous) — Fri, 12 Dec 2014 10:48:00 +0000

Olá pessoal!

Desta vez vou divulgar aqui dois temas que discuti nos últimos podcasts produzidos no Carcast Programming sobre o desenvolvimento iOS. Abaixo o video onde especialistas debatem sobre usar Storyboard e XIB file no desenvolvimento de Apps.

Se quiser contribuir com o carcast, sugestões ou críticas, envie email para:

carcastprogramming@gmail.com

Storyboards vs NIBS vs Code Debate

Podcast nas ruas do Recife sobre relatos de experiências em desenvolvimento de software

noreply@blogger.com (Anonymous) — Wed, 15 Oct 2014 11:17:00 +0000

"Bom dia, boa tarde e boa noite!" (inspirado no podcast do MacMagazine)

Estou criando alguns podcasts e estou chamando de carcast, já que a gravação do áudio está sendo feito durante meu deslocamento de carro pelas ruas da cidade do Recife (PE, Brasil). Sempre quis compartilhar um pouco da experiência que venho acumulando e achei interessante criar um podcast.

A ideia é falar sobre as experiências e das tecnologias que estou utilizando para desenvolver software no mercado de trabalho. Pontos de vista e lições aprendidas são comentadas. Quando achar pertinente, escreverei um post no blog para citar os links e até mesmo, comentar mais sobre o assunto em questão.

Sinta-se convidado para ouvir os áudios e fazer comentários ou críticas.

(LA) - Lições Aprendidas em projetos de software

noreply@blogger.com (Anonymous) — Thu, 09 Oct 2014 11:34:00 +0000

O que é LA

“Lições Aprendidas” é “o conhecimento adquirido durante o projeto, que mostra como os eventos do projeto foram abordados ou devem ser tratados no futuro com o objetivo de melhorar o desempenho futuro” (PMBOK 5a Ed.).

Ouça o podcast que comento minha experiência usando o processo de LA em projetos de software.

O que aprendi com a programação hoje: dia 12 - ciclo de vida com Javascript

noreply@blogger.com (Anonymous) — Thu, 02 Oct 2014 00:17:00 +0000

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

Entender o ciclo de vida de uma aplicação de software, é essencial para o desenvolvedor compreender como criar seus programas para a tecnologia desejada. Cada linguagem pode ter sua própria variação destes comportamentos, que chamamos de ciclo de vida do software. Neste post, vou mostrar minha percepção para aplicações em Javascript e o que eu aprendi com isso.

Ouça o podcast 6 (carinhosamente chamado de Carcast), para contextualiza-lo melhor sobre o tema deste post.

De forma genérica, de acordo com Wikipédia, o ciclo de vida pode ser definido:

"... o conjunto de transformações que podem passar os indivíduos de uma espécie para assegurar a sua continuidade." (fonte)

Para um aplicativo, podemos considerar o ciclo de vida sendo uma abstração do conceito anterior, porém voltado para software. Portanto, teríamos uma definição:

"... um conceito fundamental do processo de Engenharia de Sistemas, ... onde se desenrolam todas as fases de desenvolvimento de sistemas artificiais, ou sistemas feito pelo homem, desde a concepção até a sua eliminação." (fonte)

De forma simples, o ciclo de vida do software é onde a execução do programa começa até chegar ao seu fim. Ou seja, o programa "tem vida", quando ele é alocado na memória RAM do dispositivo, e ele "morre", quando o mesmo é removido da memória. Este processo deve estar claro para você. Por exemplo, em Java temos a codificação do método main(), que representa o ponto de início e fim ao mesmo tempo.

Já em Android, embora utilizamos a linguagem Java, temos a classe Activity que define alguns métodos que trabalham em conjunto para fornecer um ciclo de vida (onCreate, onStart, onResume, onStop, onPause e onDestroy). Veja aqui para detalhes.

Inclusive já abordei aqui um post relacionado com ciclo de vida no Android: [Mudanças de perspectivas em aplicações Android: evite recriar a Activity]

O ciclo de vida em Javascript

Tudo começa quando o Browser carrega a página HTML. Se ela tiver declarado um bloco ou arquivo Javascript, então sabemos que a página foi carregada, portanto, foi criada. Assim, o ciclo de vida foi iniciado. Mas como saber se aplicação relacionada está "morta"?

Essa é a questão chave. Existem algumas formas de saber. Uma delas é tentar monitorar os eventos que ocorrem sobre a tela HTML no Browser, e caso algum evento de transição de tela ocorrer ou algumas ações na janela do navegador, tal com a operação de minimizada a tela, podemos inferir que alguma coisa ocorreu com a tela atual, podendo assim, deduzir chamadas para o ciclo de vida.

Uma alternativa que usamos aqui é representar uma estrutura de código que cheque quando os eventos da tela HTML ocorrerem, e assim, podemos inferir o ciclo de vida básico: INICIAR, PAUSAR, MORRER.

O exemplo acima demonstra um trecho de código Javascript no qual pode-se conferir o uso deste método. Vale notar que talvez Browser que não seja o Chrome pode não funcionar. Para testar abra uma aba nova e retorne ao exemplo.

Aprendi com essa experiência que podemos simular um ciclo de vida em aplicações Web que utilizam linguagem Javascript. Porém, existem limitações e nem todos os navegadores suportam o código acima.

Uma sugestão seria usar um bloco:

var doc = window.document;
  if (doc.hidden || doc.msHidden || doc.webkitHidden) {
    // possui a propriedade de visibilidade compatível com vários navegadores
  }

Iniciando em programação de forma divertida: code.org

noreply@blogger.com (Anonymous) — Tue, 23 Sep 2014 10:29:00 +0000

Uma das coisas que mais gosto de fazer é ensinar a programação as pessoas. Imagine então, quando você encontra um site que tem esse propósito? :) O site code.org tem essa ideia e oferece uma oportunidade para aprender a programação, porém, de forma lúdica, ou seja, divertida.

Esse video acima mostra vários profissionais e pessoas conhecidas que falam da importância de aprender a programação. Eu já falei aqui no blog do porque isso é relevante [O que aprendi com a programação hoje: dia 6 - por que programar?], e não é somente eu quem está dizendo.

Estou utilizando o site do code.org para estimular alunos a gostarem da programação. Muitas vezes aprender a programar não é uma tarefa fácil para alunos, e nem para quem ensina. Mas quando tornamos o processo mais divertido: porque ELE pode SER assim, há bons resultados.

O vídeo acima demonstra um exemplo do que você pode encontrar no site indicado neste post.

Certificado de sucesso.

Ao final dos módulos, quando supera os desafios, você ganha o certificado e vai se sentir estimulado ir em frente ainda mais. :)

O que aprendi com a programação hoje: dia 11 - liderando um time

noreply@blogger.com (Anonymous) — Sat, 20 Sep 2014 04:11:00 +0000

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

Por mais técnico que possa parecer, a programação lhe permite aprender e exercitar aspectos que não são necessariamente técnicos, aprendizados que só se aprende fazendo, vivenciando o dia a dia: trata-se da liderança.

Como é liderar um time de desenvolvimento de software? Não existe uma resposta simples, mas me arrisco a falar um pouco do que estou aprendendo com essa experiência atual. Ouça o "carcast" 4 e tire as suas próprias conclusões.

Links citados no podcast:

- O Monge e o Executivo: https://www.youtube.com/watch?v=57t8MAYErqI
- Palestra sobre liderança na atualidade: http://pt.slideshare.net/mcmoraescosta/liderana-na-atualidade

O que aprendi com a programação: dia 10 - integração com Facebook

noreply@blogger.com (Anonymous) — Tue, 16 Sep 2014 03:01:00 +0000

Eu sempre quis implementar um aplicativo que faz integração com as redes sociais, mas ainda não tinha oportunidades de experimentar. Porém, tudo mudou quando precisei integrar nosso aplicativo com a rede social do Facebook.

A ideia deste post é mostrar, resumidamente, como você pode integrar o seu aplicativo ou site com a rede social do Facebook, compreender como realizar o login e como obter os dados do usuário da rede social, que precisam ser autorizados ao aplicativo para ter acesso as diversas informações disponíveis na conta.

Ouça o podcast para entender sobre alguns pontos importantes dessa integração com o Facebook usando um aplicativo ou site:

A primeira coisa que você deve fazer é registrar o seu aplicativo no site do desenvolvedor do Facebook, clicando na opção "Add a New App", e deste ponto em diante, as configurações vão depender da plataforma escolhida:

Escolha da plataforma do app. do Facebook

Para o exemplo deste post, escolhi a opção "Site". Então você terá que categorizar seu aplicativo de acordo com algumas opções pré-definidas, bastando clicar em um botão de Confirmação que seu aplicativo será criado.

O próximo passo o próprio Facebook exibirá uma tela com as próximas configurações que podem ser feitas. Haverá um código exemplo que pode ser testado no seu Website. O ponto aqui é observar a chave de acesso: AppId, que deve ser usada sempre que precisaremos acessar o Facebook para realizar o login e assim, obter os dados do usuário.

Configuração do aplicativo do Facebook com exemplos básicos

Logo abaixo da tela acima temos uma opção muito importante. Como escolhemos a plataforma web, temos que cadastrar o domínio do nosso Web site que desejamos utilizar a funcionalidade de login:

Configuração do site que pretende suportar o login

Com a configuração acima realizada, já podemos testar a funcionalidade do login no site cadastrado. Para isso, selecione o produto "Facebook Login": https://developers.facebook.com/docs/facebook-login/v2.1 e copie o código exemplo que tem já. Tal como:

Não se esqueça de atualizar seu APP_ID no lugar correspondente. Ao acessar a página com o código acima, se clicar em login, o facebook irá realizar o login, porém, dependendo do seu User, vai exibir uma página de autorização. Se o usuário confirmar, então as resposta de sucesso ou falha serão chamadas usando a lógica demonstrada no exemplo acima.

Tela de autorização do usuário do Facebook após fazer o login

Esse processo é descrito na página do Facebook Development e deve ser entendido se você deseja realizar o login. Umas das mudanças da nova API 2.1, é que o usuário poderá rever as informações que o aplicativo está utilizando, podendo alterar ao acessar na opção "Reveja as informações que você compartilha".

Informações que o aplicativo usará antes do login do usuário

Podemos ver na tela abaixo o login sendo exibido. Para você testar, tente acessar a URL com o código citado anteriormente e acessando o aplicativo criado no Facebook para realizar login:
http://profdouglas.blogspot.com.br/p/login-test-facebook.html

Tela com o login sendo chamado

O que aprendi com o login do Facebook

Existem algumas diferenças quando tentamos acessar o login usando um aplicativo nativo (ex. Android, iOS e outros). Uma delas é que temos que possuir uma URL para redirecionar quando o login for feito com sucesso. Então, se você não tiver um server side (servidor) com um domínio registrado, pode-se utilizar uma URL temporária provida pelo próprio Facebook.

Neste caso, temos que acessar a tela de configuração do aplicativo, acessar a opção de "Settings/Advanced", procurando a opção "Valid OAuth redirect URIs" e adicionar a URL:
https://www.facebook.com/connect/login_success.html.

Desta forma, quando as requisições foram feitas pelo seu aplicativo nativo, após o usuário efetuar o login, o Facebook irá redirecionar para essa página e lhe enviar o Token com as credenciais aceitas. Eu encontrei neste site umas dicas de como implementar esse esquema para uma aplicação web nativa.

Outro aprendizado que me custou algum tempo para entender... o código de exemplo do Facebook talvez não funcione na sua página local ou no seu Browser. Lembre-se que esses códigos precisam estar executando em algum servidor web. Ou então os códigos podem não funcionar no browser Chrome por conta das restrições de segurança. Se testar no Firefox a probabilidade de que funciona aumenta. Além disso, procure exibir a tela de console para certificar que o fluxo previsto está sendo chamado.

O que aprendi com a programação hoje: dia 9 - devtools e javascript

noreply@blogger.com (Anonymous) — Fri, 12 Sep 2014 10:43:00 +0000

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

Um grande aprendizado que me permitiu rever os meus "preconceitos" com a linguagem javascript foi entender como testar o meu código usando o Browser, e foi a série do vídeo abaixo que me ajudou.

Recomendo assistir:

Depois de assistir esse vídeo comecei a compreender como fazer a depuração usando o ambiente DevTool, que inclusive me permiti escrever um post sobre ele aqui [dia 3].

O que aprendi com a programação hoje: dia 8 - internacionalização em Javascript

noreply@blogger.com (Anonymous) — Tue, 09 Sep 2014 11:07:00 +0000

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

2/4/95

Você consegue distinguir o formato de data acima? Não se sabe ao certo se o 2 indica o dia e o 4 o mês, pois poderia ser o contrário (1995-04-02 ou 1995-02-04). Sabe-se, no entanto que é um padrão de formato de data usado e aceito tanto nos EUA como na Inglaterra. Segundo destaca esse post, há pelo menos 6 possíveis interpretações. Mas agora veja o formato abaixo, será que o mesmo é familiar para você?

globalização do software (fonte da imagem)

09/09/2014

Provavelmente você terá condição de entender melhor, o formato de data que é mais familiar para você ou aquele que você já conhece. O formato de datas possui diversas representações universais, mas dependendo do país que o pratique, haverá maior familiaridade e facilidade de identificação de sua parte. A mesma coisa ocorre com os usuário do mundo.

Por que esses formatos são relevantes e qual a relação com a programação?

Quando estamos querendo popularizar nosso site ou nosso aplicativo, qual será a sua abrangência desejada? Será global ou continental, regional ou talvez local? Em qual país pretende disponibiliza-lo?

Essas são apenas algumas das perguntas que terás que responder se desejar publicar um site ou aplicativo universal, no qual temos que levar em consideração o lugar, a cultura, os padrões estabelecidos do idioma do usuário. Dependendo das suas respostas e de como decidir representar as informações, terás que traduzir os termos e textos contidos para mais de um idioma.

Haverá preocupação também com a moeda local, da representação do dinheiro, além do seu formato de datas considerando onde o usuário está agora, ou seja, a sua localização geográfica. Essa preocupação de representar a informação "correta", dependendo do idioma preferido do usuário, é uma das preocupações mais relevantes para um aplicativo que deseja ser global. Trata-se da tradução e da localização dos dados, e chamamos esse tratamento e implementação de: internacionalização.

Processo de Internacionalização e localização (fonte Wikipédia)

O processo de internacionalização pode ser feito com qualquer software e linguagens modernas, preparando e definindo diversos arquivos de dados para cada idioma pretendido. Geralmente, damos suporte para idiomas mais falados no mundo: Inglês, Espanhol, Mandarim e o idioma nativo da equipe envolvida na produção do software. Mas isso depende sempre da demanda do projeto do cliente, da equipe envolvida e da natureza do que se está fazendo. Além disso, não estou dizendo que é fácil de fazer, uma vez que traduzir conteúdo de qualidade consome esforço que deve ser considerado.

Em projetos com Android e iOS já existem formas padronizadas pelas tecnologias para usar a internacionalização. Basta seguir os procedimentos indicados e que estão detalhados na documentação de ambas. Essas padronizações, favorecem o impacto do esforço envolvido no que tange a codificação dos dados, mas não diminui o esforço de tradução.

Um bom tradutor pode valer mais do que um Google Translate? Essa discussão está fora de questão para o meu blog. :) Mas fique "esperto" sobre isso!

Como fazer a internacionalização em um projeto Web que utiliza a linguagem Javascript, HTML 5 e CSS?

Existem várias bibliotecas disponíveis em Javascript e que podem ser usadas. Veja essa discussão no Stackoverflow.com sobre isso.

Em nosso projeto experimentamos utilizar a biblioteca chamada i18Next, e após um pouco de estudo, achamos interessante utilizá-la primeiramente porque é simples, em segundo porque possui integração com outra biblioteca que já estamos utilizando, a conhecida jQuery. E em terceiro lugar, podemos criar mais de um arquivo de tradução usando o formato de dados JSON, um arquivo para cada idioma de tradução.

Dessa forma, vamos entender como usar essa biblioteca. Baixe as seguintes bibliotecas i18Next e jQuery, depois poderá referenciá-las no seu código HTML. Abaixo, veja o código HTML que demonstra uso de internacionalização preparado para esse post (no final do post coloquei o link para baixar o exemplo completo):




Insert title here







 : 
termos específicos:

coming: 
completed: 
congratulations: 

termos comuns:

key1: 
key2:

Agora que já declaramos nossas dependências na tag ..., podemos ver o código que utiliza a tag (data-i18n="chave"), que permite usar o valor associado à chave e descrito dos arquivos de tradução. Já o código abaixo utiliza uma estrutura Javascript criada para representar o uso da biblioteca i18Next:

/*global i18n */

var Internacionalizacao = {

 LANGUAGES_AVAILABLE : [ 'en-US', 'pt-BR' ],

 /*
  * Inicializa arquivo de traducao de acordo com a lib i18Next.
  * Veja mais detalhes aqui: 
  */
 init : function() {
  var language = Internacionalizacao.getLanguage();

  // detecta a lingua do browser e se nao tiver a desejada, setamos uma default
  if (!(Internacionalizacao.LANGUAGES_AVAILABLE.indexOf(language) > -1)) {
   language = Internacionalizacao.LANGUAGES_AVAILABLE[0]; // default en-US
  }


  i18n.init({
   lng : language,
   load : 'current'
  }, function(t) {
   Internacionalizacao.translateElements(t);
  });
 },

 /* 
  * Detecta a linguagem atual do browser do usuario
  * @return linguagem atual, exemplo: pt-BR, en-US... 
  */
 getLanguage : function() {
  var userLang = navigator.language || navigator.userLanguage;
  return userLang;
 },

 /*
  * Funcao que traduz todos os elementos que possuem data-i18n e substitui 
  * pela traduz contida em sua chave. 
  * 
  * O arquivo deve estar em /arquivo_traducao.json>.
  */
 translateElements : function(t) {
  var elements, element;

  elements = document.querySelectorAll('[data-i18n]');

  for (var index = 0; index < elements.length; index++) {
   element = elements[index];
   element.innerHTML = t(element.getAttribute('data-i18n'));
  }
 }
};

// inicializar biblioteca de traducao i18Next durante o load da página
Internacionalizacao.init();

Esse código foi criado com o nome internacionalizacao.js com o objetivo de parametrizar as configurações da biblioteca i18Next. Existem várias opções disponíveis. Veja mais detalhes no site do desenvolvedor aqui.

Por fim, teremos 4 pastas com conteúdos semelhantes a estrutura do arquivo a seguir. Cada pasta, representa um idioma suportado usando um padrão de nomes internacional para representar um idioma_país (ex. pt-BR (português do Brasil), en-US (inglês norte americano), es (espanhol), dev (padrão e comum para o aplicativo como um todo)). Sendo que o "dev" representa neste caso, palavras em comum para qualquer idioma.

{
  "coming": "Em breve teremos novos desafios a ...",
  "completed": "Você completou todos os desafios!",
  "congratulations": "Parabéns!",
  "goal": "Objetivo"
}

Rodando em alguns Browsers, por que nem todos funcionam?

A primeira coisa que demorei a compreender tem haver com a pergunta acima. Os exemplos que estava utilizando não pareciam funcionar. As mensagens de logs que a tela de inspeção de elementos (Debugging) [veja o post do dia 3 para mais detalhe], usando a view de Console, não me permitiram entender o que estava acontecendo. Pior ainda, me levando a crer que eu estava fazendo alguma coisa errada no código ou no uso da biblioteca i18Next. Tentei outras bibliotecas também. Acho que no total, foram umas 8 horas de pesquisas e testes.

Após ler uma dica do desenvolvedor do i18Next, sugerindo que testasse o exemplo do seu site no browser Firefox, me dei conta que eu estava testando apenas no Chrome. Então percebi que o Chrome possui validações de segurança para impedir que códigos maliciosos possam danificar o sistema operacional. Assim, por padrão alguns códigos não tem permissão de rodarem. A menos que usemos um server side instalado em nossa máquina, como Apache, node.js, etc. Neste caso, o browser roda sem problemas.

Rodando no browser Firefox

A imagem acima mostra como o Browser exibe o nosso pequeno exemplo. Veja que no Firefox (acima), o resultado esperado está certo, enquanto que o Chrome (abaixo), não funciona pelo motivo explicado anteriormente.

Rodando browser Chrome

Moral da história: em programação para Web, não use somente um Browser para realizar seus testes. Utilize os mais recentes, usando diferentes resoluções de telas. Os principais browsers são ilustrados na imagem abaixo:

Browsers (fonte)

O que aprendi com a programação usando a internacionalização é que podemos tornar nossa aplicação mais globalizada, considerando a região e localização do usuário. Assim, espera-se maior aceitação do aplicativo, além de considerar uma maior abrangência de sua comercialização, podendo expandir sua distribuição geográfica.

Também aprendi que temos que tomar cuidado com os termos usados na tradução, pois o significado de uma palavra mal traduzida pode expressar outro significado, correndo risco de errar, e no pior caso, cometendo uma grande gafe ou equívoco.

A programação com javascript usando internacionalização torna o processo bem mais fácil, mas somente do ponto de vista técnico. Isso não garante conteúdo traduzido de qualidade.

Outras estratégias também podem ser usadas para realizar a internacionalização tais como, usar imagens e metáforas visuais para representar significados. Mas isso deve ser ponderado ainda mais, pois se uma imagem vale mil palavras, errar essa representação da imagem pode representar 1000 problemas. Você tem ideia do quanto isso pode lhe custar? Mas isso é um assunto que transcende esse post. Talvez possa ser discutido em outra ocasião.

Se gostou desse post, tiver críticas ou sugestões, ou mesmo se souber de algum material que complemente o assunto discutido aqui, sinta-se encorajado em contribuir, comentando ou compartilhando em sua rede social, expandindo ainda mais nosso papo que não se encerra aqui.

:)

Os códigos fontes dos exemplos criados para esse post podem ser baixados aqui.

O que aprendi com a programação hoje: dia 7 - Parse.com

noreply@blogger.com (Anonymous) — Thu, 04 Sep 2014 12:58:00 +0000

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

A plataforma Parse fornece uma solução de back-end completa para o um aplicativo móvel. Segundo a sua documentação, o objetivo do Parse é eliminar totalmente a necessidade de escrever código do servidor ou manutenção de servidores. Hoje vou abordar um pouco sobre essa tecnologia que permitiu validar uma funcionalidade de nosso projeto, no qual, dependia da infraestrutura de server side.

Para contextualizar, escute o áudio que preparei para que você entenda melhor o contexto da nossa necessidade em questão, pelo qual foi necessário encontrar soluções alternativas como serviços (SAAS).

A ideia é eliminar a dependência da infraestrutura de servidor para armazenar os dados dos diferentes clientes, que rodam nosso aplicativo em seus celulares. Com o Parse, podemos viabilizar essa estrutura com pouco esforço. O objetivo é minimizar a configuração e rapidamente começar a construir seu aplicativo com JavaScript e HTML5 em Parse.

Site do Parse.com com tradução Google Translate

Apps

Em Parse, você cria um aplicativo para cada um de seus aplicativos móveis. Cada aplicativo tem seu próprio ID e sua chave de cliente JavaScript, assim você poderá usar na sua aplicação web. Sua conta no Parse pode acomodar vários Apps. Isto é útil mesmo se você tiver um aplicativo, uma vez que você pode implantar versões diferentes para teste e produção.

Acesse o site do Parse, crie uma conta e cadastre seu aplicativo. Leia a documentação que ele possui para entender melhor.

Dependências

O JavaScript SDK do Parse, praticamente não necessita de quaisquer bibliotecas externas. A única exceção é a classe do Parse.View, que exige que você forneça jQuery ou jQuery compatível $ método.

Modelo de Objetos (Parse.Object)

Armazenamento de dados em Parse é construído em torno Parse.Object. Cada Parse.Object contém pares de chave-valores de dados JSON-compatíveis. Este dado é sem esquema, o que significa que você não precisa especificar de antemão que existem chaves em cada Parse.Object. Você simplesmente define qualquer pares de chave-valor que você quer, e a infraestrutura do Parse irá armazená-la.

Por exemplo, digamos que você está acompanhando altas pontuações para um jogo. Um único Parse.Object poderia conter:

pontuacao: 20500, nomeJogador: "Douglas Frari" , faseAtual: 3

As chaves devem ser sequências de caracteres alfanuméricos. Os valores podem ser strings, números, boleanos, ou mesmo matrizes e dicionários - qualquer coisa que pode ser JSON codificado.

Cada Parse.Object é uma instância de uma subclasse específica com um nome de classe que você pode usar para distinguir diferentes tipos de dados. Por exemplo, poderíamos chamar a pontuação mais alta como um objeto de nome GameScore.

Salvando objetos

Vamos dizer que você deseja salvar o GameScore descrito acima para o Parse Cloud. Poderia fazer assim:

var GameScore = Parse.Object.extend("GameScore");
var gameScore = new GameScore();
 
gameScore.set("score", 1337);
gameScore.set("playerName", "Sean Plott");
gameScore.set("cheatMode", false);
 
gameScore.save(null, {
  success: function(gameScore) {
    // Execute any logic that should take place after the object is saved.
    alert('New object created with objectId: ' + gameScore.id);
  },
  error: function(gameScore, error) {
    // Execute any logic that should take place if the save fails.
    // error is a Parse.Error with an error code and description.
    alert('Failed to create new object, with error code: ' + error.message);
  }
});

Recuperando os dados

Pode-se recuperar os objetos usando uma forma simples, porém, com muitas possibilidades para fazer filtros. Veja essa página com dicas: https://parse.com/docs/js_guide#objects-retrieving

 var GameScore = Parse.Object.extend("GameScore");
  query = new Parse.Query(GameScore);
  query.limit(10);
  // Sorts the results in descending order by the score field
  query.descending("score");

  query.find({
   success : function(results) {
    console.log("Successfully retrieved " + results.length
      + " scores.");
    // Do something with the returned Parse.Object values
    var object, i;

    for (i = 0; i < results.length; i++) {
     object = results[i];
     console.log(object.id + ' - '
       + object.get("playerName") + ': '
       + object.get("score"));
    }

   },
   error : function(error) {
    console.log("Error: " + error.code + " " + error.message);
   }
  });

Essa foi a dica do Parse.com, um serviço como alternativa a servidores externos.

Aprendi que esses serviços estão sendo muito usados por aplicativos móveis em Android e iOS, pois oferecem transparência e simplicidade aos desenvolvedores, reduz custos de desenvolvimento e eliminam a necessidade de manter um servidor externo.

Além disso, não há preocupações com a hospedagem e manutenção desse server side. Mas nem tudo são flores. Para serviços externos mais complexos, talvez o Parse não seja tão interessante. Mas isso é tópico para se investigar por demanda em futuros posts.

O que aprendi com a programação hoje: dia 6 - por que programar?

noreply@blogger.com (Anonymous) — Wed, 03 Sep 2014 08:00:00 +0000

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

Hoje vou lembrar um aprendizado antigo, mas que continua me inspirando até hoje: a importância da programação. Foi após perceber que pela programação, através do seu processo intrínseco de criação, vários estímulos criativos são ativados em nossa mente, desafiando nossa imaginação e nos motivando a decifrar um problema.

Governo Britânico adota programação no currículo básico

O problema em questão é similar a um quebra-cabeças, nos desafia em certa medida, a ponto de tornar esse desafio uma coisa potencialmente promissora de se exercitar. É como praticar um esporte, quanto mais se faz, mais se desperta interesse a medida que ganhamos algo com isso. Na programação se usam muitos neurônios, talvez por isso que o café é bastante popular.

E se você pensa que isso é papo de programador, o que justifica alguns governos da Europa (britânico por exemplo), adotarem o ensino da programação tornando-a parte do currículo básico na formação educacional? Não é de hoje que isso vem acontecendo lá na Europa.

Vou mostrar alguns argumentos para tentar justificar a importância e necessidade de usar a programação agora.

O uso dos computadores, celulares e dispositivos eletrônicos em geral estão se tornando cada vez mais populares, pois são utilizados para diversos propósitos, tais como nas áreas do entretenimento, finanças, lazer, comunicação, etc. Os aplicativos assumiram um papel relevante para as pessoas.

A demanda por software tem alcançado níveis gigantescos. A área do conhecimento que contribui para agrupar os diferentes níveis do software é a programação. O profissional programador tem um papel relevante na criação do software e para tal requer conhecimentos de lógica de programação e algoritmos, além de compreender o uso das linguagens de programação.

A programação é considerada por especialistas da educação como uma extensão da língua, pois permite ao aprendiz desenvolver o raciocínio de forma sistemática e lógica, motivando a construção de relações com os outros campos do conhecimento humano. Escrever código engaja as pessoas em um novo caminho do pensamento. Elas aprendem a organizar, refinar e refletir sobre suas ideias.

As habilidades de programação permitem aos alunos "escreverem" novos tipos de coisas/pensamentos/conhecimentos - estórias interativas, jogos, animações e simulações. Consequentemente, há cada vez mais demandas da sociedade por pessoas ou profissionais que saibam "mexer"/programar com a criação de software.

No processo de aprender a codificar os programas os alunos aprendem muitas outras coisas. Eles não aprendem apenas a codificar, eles estão codificando o aprendizado. Aprendendo matemática e ideias computacionais (como variáveis e condicionais), eles estão aprendendo estratégias para resolver problemas, criando projetos e comunicando ideias. Essas habilidades são uteis não apenas para cientistas da computação, mas para qualquer um, independente da idade, conhecimentos prévios ou ocupação.

Esses foram apenas alguns dos argumentos que eu posso citar. Imagine quantas pesquisas estão sendo feitas e quanto potencial e demanda existe?

Uso de linguagens por idade e experiência (fonte)

Essa pesquisa mostra quais as linguagens estão sendo usadas, para quais grades escolares e para qual faixa de idade estão sendo usados para o ensino da programação. Não é legal?

Se você tem ouvidos e olhos, veja com os próprios esses dois vídeos. O primeiro é de um garoto que foi apresentar no TED a sua experiência com a programação. O segundo é um depoimento de Bill Gates sobre coisas que não lhe dizem na escola.

A importância de aprender a programar

11 coisas que não se aprende na escola

O que aprendi com a programação hoje: dia 5 - persistência em Javascript

noreply@blogger.com (Anonymous) — Tue, 02 Sep 2014 11:20:00 +0000

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

Imagine como seria usar um sistema que não guardasse suas informações? Ao tentar acessar seus dados e sempre que você quisesse manipular uma informação, se não estivessem armazenados, você teria que cadastrá-los antes de utilizá-los. Isso seria possível, porém bastaria reiniciar o sistema que haveria necessidade de repetir o processo anterior. Portanto, guardar informações em um sistema, tecnicamente chamada de persistência, é uma funcionalidade essencial em qualquer programa.

Um dos primeiros tablets que eu me lembro e que foram lançados no mercado, isso se podemos considerá-lo tablet, chamado Palm, possuía vários recursos interessantes para sua época, tal como uma caneta, tela com toque, programas de agenda e aplicativos com ênfase em produtividade (tais como notas, calculadora, calendário, ...). No entanto, se a bateria descarregasse, as informações previamente escritas seriam perdidas. (só os primeiros modelos) Não demorou muito para uma solução ser proposta como uma memória externa para permitir manter os dados persistentes. É claro que a experiência mostrou que esse tipo de funcionalidade deve ser integrada de forma transparente aos usuários, ou seja, deve ser utilizado de forma natural, sem que o usuário perceba, assim como você utiliza a sua memória cerebral para guardar informações.

Os programas feitos para internet usando HTML e tecnologias para Web, têm propostos diferentes abordagens para realizar uma forma de persistência. Cada linguagem propõe diferentes mecanismos. Talvez a mais simples e conhecida seja aquela abordagem de HTML, usando os chamados Cookies. Estes são apenas um conjunto de dados agrupados na representação de chave e valor, no qual a chave é uma forma de associar a informação e o valor é a própria informação propriamente dita. Essa informação é gerenciada usando o Browser do usuário e tem sido usado até hoje pela simplicidade. Porém, em termos de segurança podemos questionar o seu uso.

A proposta dos Cookies são simplicidade para armazenar e recuperar a informação quando necessário. O grande problema, talvez seja porque se diferentes browsers forem utilizados, em diferentes sistemas operacionais, por diferentes plataformas de hardware, temos uma necessidade de utilizar as linguagens de programação e suas tecnologias de banco de dados. Mas neste caso, para onde vai nossa simplicidade?

Neste sentido, o armazenamento de persistência em HTML 5 não se propõe a resolver o problema do parágrafo anterior, mas tornar ainda mais simples a forma que o Cookie propôs, ou seja, manter a possibilidade para registrar dados usando chave e valor. Só que agora, na minha opinião, usando de forma padrão para que todos que desejarem usar HTML utilizem uma maneira em comum de se fazer isso, permitindo maior compatibilidade e reuso.

Em HTML 5 podemos escolher persistir a informação em duas áreas: área de sessão e a área local.

A área de sessão mantém os dados salvos em memória RAM enquanto a sessão do navegador estiver ativa. No momento que o Browser é fechado os dados armazenados nesta área serão apagados automaticamente. Na prática os dados irão para o "céu dos computadores".

Já a área chamada de local, os dados poderão permanecer persistentes após o Browser ser fechado. Isso permite manter e recuperar os dados associadas a chaves específicas. Então se você precisa salvar os dados e recuperá-los quando a sua página é carregada, use essa área, tecnicamente conhecida como localStorage.

Vejamos um exemplo de trecho de código Javascript para fazer a persistência usando um método setar(minhaChave,meuValor):

 function set(key, data) {
  if (window.hasOwnProperty('localStorage')) {
   window.localStorage.setItem(key, data);
  }
 }

A dinâmica dessa verificação é simples. A função set(key,data) possui dois parâmetros com a chave desejada e um valor para associar com essa chave. O bloco da condição IF verifica se o atual usuário já possui a área de local disponível para ser utilizada. Caso afirmativo, podemos usar o atributo do objeto window.localStorage invocando a função setItem(...).

 function get(key) {
  if (window.hasOwnProperty('localStorage')) {
   return window.localStorage.getItem(key);
  }
 },

A forma para recuperar a informação é ainda mais simples. Só precisamos saber qual a chave que contém os dados associados com a chave apropriada. O cuidado aqui é criar chaves específicas para informações específicas. Evite nomes de chaves complicados ou com caracteres especiais. Pense em um nome de variável para renomear suas chaves.

Uma estrutura que achamos interessante utilizar e poderia ser usado através de um arquivo Javascript chamado persistencia.js:

var Persistencia = {

 property : 'localStorage',

 set : function(key, data) {
  if (window.hasOwnProperty(Persistencia.property)) {
   window.localStorage.setItem(key, data);
  }
 },

 setHash : function(key, data) {
  Persistencia.set(key, JSON.stringify(data));
 },

 get : function(key) {
  if (window.hasOwnProperty(Persistencia.property)) {
   return window.localStorage.getItem(key);
  }
 },

 getHash : function(key) {
  var data = Persistencia.get(key);

  if (data) {
   return JSON.parse(data);
  }
 },

 remove : function(key) {
  if (window.hasOwnProperty(Persistencia.property)) {
   window.localStorage.removeItem(key);
  }
 },

 clear : function() {
  if (window.hasOwnProperty(Persistencia.property)) {
   if (localStorage.length > 0) {
    localStorage.clear();
    console.log("clear function");
   }
  }
 }

};

Implementação da persistência

Que tal um pouco de prática?

Vamos complementar nosso exemplo de animação anterior e adicionar uma informação de forma persistente. Contar a quantidade de cliques na tela e manter essa informação persistente na área local. Assim, no momento que acessar o HTML da animação do nosso exemplo, a última atualização realizada deverá ser exibida na tela. Caso desejar resetar o valor atualmente persistente, pode utilizar o comando abaixo usando a ferramenta DevTools, na área de Console:

localStorage.clear();

Para baixar todos os arquivos com seus códigos fontes acesse aqui.

A imagem ao lado demonstra a execução do arquivo Bola.html que pode ser baixado, junto com os demais arquivos, no link indicado acima.

Se você tiver alguma sugestão de tópico, sugestão ou crítica, fique a vontade para comentar ou solicitar aqui.

O que aprendi com a programação hoje: dia 4 - sons em Javascript

noreply@blogger.com (Anonymous) — Mon, 01 Sep 2014 09:00:00 +0000

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

Se você está fazendo um jogo ou pretende fazê-lo, ou simplesmente está com curiosidade em saber do que se trata, considere compreender como adicionar efeitos sonoros no seu aplicativo ou game, pois a experiência do usuário fica bem melhor. Neste pequeno post vou mostrar como usar os sons, pois com a linguagem Javascript, tudo fica super simples.

Para tocar uma música ou som, você precisa ter um código Javascript que rode algo como isso:

var audio = new Audio('audio.mp3');
audio.play();

Considerando o exemplo publicado no post do dia 2, sobre animação, que tal adicionar uns efeitos para entender como se faz na prática? Podemos adicionar um tema musical, no qual ficará sempre tocando, além de alguns efeitos sonoros de acordo com o desejado. Neste caso vou demonstrar o efeito de um click na tela, que junto animação da bola, vai tocar efeito sonoro a cada click.

var Sound = {

 init : function() {
  Sound.audio = new Audio('main_theme.mp3');
  Sound.audio.loop = true;
  Sound.play();
 },

 play : function() {
   Sound.audio.play();
 },

 resetAndPlay : function() {
  Sound.audio.currentTime = 6;
  Sound.play();
 },

 pause : function() {
  Sound.audio.pause();
 },

 playSound : function(sound) {
   var audioFile, audio;
   audioFile = sound;
   audio = new Audio(audioFile);
   audio.play();
 },

 playClick : function() {
  var audio = "smb_kick.wav";
  Sound.playSound(audio);
 },

 gameOver : function() {
  Sound.pause();
  var audio = "smb_gameover.wav";
  Sound.playSound(audio);
 },

};

Sound.init();

O código é relativamente simples. Em Javascript temos o objeto Audio, e neste temos alguns controles padrões, tais como: loop do áudio e currentTime. O loop podemos configurar para tornar a música repetitiva quando ela acabar. Enquanto que em currentTime podemos configurar para a música começar a partir de um determinado intervalo de tempo.

Podemos criar funções para tocar ou pausar os sons específicos. Vários formatos de arquivos são suportados pelo Browser. Eu já testei com MP3, WAV e OGG. Todos funcionaram. É importante destacar que se uma música está em execução, e você desejar tocar outra, basta chamá-la que o novo som vai tocar em paralelo com o atual. Se desejar parar ou pausar a música atual, pode chamar o método pausar. Para estudar melhor sobre sons em Javascript de uma olhada neste link.

Vejamos como o jogo principal foi atualizado para possuir as chamadas do sound.js pelo arquivo bola.js:

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;

  // SOM de click
  Sound.playClick();

  Animacao.pintar();
 },

 pintar : function() {

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

  // atualizar posicao e pintar objeto
  bola.update();
  bola.draw();


  // se objeto saiu da tela
  if (bola.y > Animacao.CANVAS.height) {

   console.log("Animacao saiu da tela -> gameOver");

   bola.y = 0;
   bola.draw();

   // SOM de game over

   Sound.gameOver();
   setTimeout(Sound.resetAndPlay,4000);
  }

  // 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
     requestAnimationFrame(Animacao.pintar);
    }
  }
 },

};


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;

Baixei alguns sons prontos que encontrei em uma busca na internet. No entanto, tenha cuidado para não sair copiando da internet qualquer som que você achar legal, pois há licenças proibitivas (copyrights), e que podem não estarem autorizados pelos detentores da propriedade intelectual. Para fins de testes, eu copiei as músicas do Mário neste site. Se desejar publicar, recomendo utilizar sons de domínio público ou produzir seus próprios.

Um detalhe importante: se deseja fazer diferentes partes do código Javascript chamarem os sons específicos, garanta que o arquivo sound.js seja declarado no HTML antes dos demais Javascripts para que sejam reconhecidos.



 
 Bola



 
 
início


 

 
  
fim

Aprendi com a programação para tratamento de sons usando Javascript que é muito simples de usá-los. Percebi também que o mais difícil não é fazê-los tocarem, mas encontrar um som de nosso agrado. O ideal seria produzir os próprios sons. Mas isso também envolve um custo adicional.

Para baixar todos os arquivos com seus códigos fontes acesse aqui.

Que tal usar persistência em Javascript/HTML 5. De forma simples poderemos salvar dados do usuário e tornar nosso aplicativo bem mais "inteligente". No próximo post vou tentar explicar como gravar dados.

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

noreply@blogger.com (Anonymous) — Sat, 30 Aug 2014 13:41:00 +0000

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? :)

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

noreply@blogger.com (Anonymous) — Fri, 29 Aug 2014 01:15:00 +0000

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




Bola



 
 
header


 

 
  
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

noreply@blogger.com (Anonymous) — Wed, 27 Aug 2014 18:15:00 +0000

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.