Por que REACT JS?

React JS é o assunto do momento no Brasil e Europa, nos EUA já faz sucesso a mais de um ano o framework do Facebook apenas confirma sua força este ano. React é a tecnologia chave requisitadas nas principais vagas de front aqui na Europa tirando o espaço do Angular ainda bastante forte. Como parte do meus estudos vou traduzir alguns artigos e tutorias que ando lendo. O primeiro deles é uma breve introdução vou utilizar como base o “Why React?” e “Getting Started“.

Por que React ?

React é uma biblioteca javascript para criar interfaces do Facebook e Instagram. O React foi criado para resolver o problema: Criar largar aplicações com dados que mudam a cada segundo.

Simples

Simplesmente expressar como sua aplicação deve olhar para qualquer ponto no tempo, e React vai automaticamente administrar todas atualizações da sua interface quando seus dados mudam.

Declarativo

Quando os dados mudam, React conceitualmente dispara o botão “refresh” e sabe quando atualizar os dados que mudaram.

Construindo ambiente “componentizável”

React é todo construído sobre componentes reutilizáveis. Na verdade, com React a única coisa que você precisa é construir componentes. Uma vez que eles são encapsulados, componentes podem fazer seu código reutilizável, “testável” e com fácil separação de interesses.

Iniciando os trabalhos

Primeiramente vamos baixar o “Starter Pack”, nesse pacote possui as versões prebuilt do React e React DOM para o seu browser, como também uma coleção de exemplos para o seu estudo. Então depois que baixar e descompactar o zip com o starter pack, temos a seguinte estrutura:

Screen Shot 2016-06-10 at 5.54.08 PM

Vamos criar o nosso primero arquivo helloworld.html na pasta raiz.

O exemplo acima foi retirado da documentação, vamos explicar alguns pontos. para executar o React precisamos de três arquivos básicos react.js , react-dom.js e o browser.min.js(babel). Adicionamos uma div com id “example” na linha seguinte adicionamos uma tag script com o type “text/babel” esse parâmetro é utilizado pelo Babel.

Para quem não conhece ele é um compilador genérico multifuncional de JavaScript. “What?” Compliquei? na real ele compila as versões mais recentes do JavaScript(ES2015 e ES2016) e React para uma versão que rode nos browsers atuais. Se quiser saber mais dá uma conferida no link: https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md#toc-introduction

Dentro da tag script podemos ver uma mistura de javaScript com HTML essa syntax é conhecida como JSX, no exemplo acima utilizamos uma função que renderiza o JSX “ReactDOM.render” ela recebe dois parâmetros: o nosso código JSX e o elemento que iremos adicionar o código renderizado(O h1 com hello world).

Claro esse é um exemplo de introdução, não é obrigatório o código JSX ficar dentro do html podemos criar um arquivo js separado sem problemas.

Exibindo os dados

A utilização mais básica em uma interface é exibir algum dado. O foco do React é facilitar essa tarefa e manter as interfaces atualizadas em tempo real quando os dados mudam.

Vamos criar uma segundo exemplo com alguma interação.

No exemplo acima criamos um componente classe utilizando a função “React.createClass” temos e várias maneiras de criar componentes e cada caso tem uma particularidade, no caso do createClass passamos um objeto como parâmetro e o atributo render possui um JSX como valor. Isso não determina que o JSX será compilado nesse momento. Apenas deixa pre-definido o que será “renderizado” quando chamarmos o componente “Relogio” mais a frente dentro do nosso JSX temos um ponto importante “{this.props.date.toTimeString()}” as chaves especifica que esse item é uma variável no caso quem chamar o componente precisa passar o atributo “date”.

Após o createClass temos um setInterval que irá chamar a cada 500 milisegundos ReactDOM.render e chamamos o componente que criamos anteriormente e passamos um parâmetro date. Se tudo e correr bem teremos em nossa tela o texto:

Olá, são exatamente: XX:XX:XX(hora atual)

Se quiser saber mais sobre React da uma conferida na documentação: https://facebook.github.io/react/index.html

Próximo Post irei abordar mais esse ponto de criar componentes e o modo de pensar no conteúdo utilizando React.

Como Traduzir o wordpress para versão pt_BR

Olá pessoal, este tutorial é simples e vai para aquelas pessoas que instalaram a versão inglês do wordpress e querem traduzir o painel. Claro tem a versão já em pt_BR pode instalar direto, mas por algum motivo você tem a versão em inglês, calma não precisa reinstalar tudo, apenas adicionar o arquivo de tradução e configurar o wordpress, então vamos lá.

Primeiro você precisa baixar o arquivo de tradução com a extensão “.mo” e no link a seguir você tem informações sobre as traduções :

http://codex.wordpress.org/WordPress_in_Your_Language

Uma lista meio extensa procure por pt_BR ou acesse o svn das traduções:

http://svn.automattic.com/wordpress-i18n/pt_BR/tags/

Se você não trabalha com svn, procure pelo arquivo “pt_BR.mo” no caso da verssão 3.2 está em “/3.3.2/messages” clique no link do arquivo com o botão direto e escolha “salvar link como” e baixe a tradução.

No link acima você vai encontrar as traduções das últimas versões, baixe a tradução referente a versão do seu wordpress. Para saber qual é a versão do seu wordpress pode visualizar no painel de administração de seu wordpress como na imagem abaixo :

Depois que você baixou o seu arquivo de tradução.

1. Crie uma pasta “languages” dentro de sua pasta “wp-content”. Como na imagem a seguir :

2. Adicione os arquivos que você baixou na pasta “languages”
3. Edite seu arquivo wp-cofig.php, procure a linha de comando que contém o seguinte comando :

Modifique para :

Se tudo der certo seu wordpress será traduzido. Se o tema que você usa tem suporte a multi idioma algumas partes do tema serão traduzidos assim como informações como de data exemplo os meses.

Como definir a largura máxima das imagens em seu tema wordpress

Existem duas maneiras para especificar o tamanho máximo das imagens utilizadas dentro dos posts. Uma via painel do WordPress e a outra forma via functions.php.

Via painel só acessar o menu > configurações > mídia :

No painel de mídia temos a opção de escolher o tamanho dos thumbs, tamanho médio e o tamanho máximo das imagens.

A segunda forma de definir o tamanho máximo das imagens é editando o arquivo functions.php adicionando o seguinte comando :

Esse comando sobrescreve as opções definidas no menu. Nesse caso, estamos definindo como 600px a largura máxima de nossas imagens. Se tudo estiver ok no painel de uploads nosso tamanho grande vai aparecer sempre como 600px de largura :

Então um dica simples que ajuda o usuário na hora de subir as imagens e respeitar a largura do tema.

Evento Change TextField – Como contar o número de caracteres

A Classe TextField tem 4 eventos: change, link, scroll e input. Nesse tutorial vou trabalhar com o evento “change” para fazer um pequeno contador de caracteres. O evento change como o nome sugere é chamado quando o inputText é alterado. Então vamos começar o tutorial:

O código já está comentado para facilitar o entendimento, mas o princípio básico é:

  • Definir a quantidade máxima de caracteres
  • Adicionar o evento de listener
  • E fazer o tratamento na função que o listener chama

o resultado vai ser o seguinte:

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2010/07/main.swf w=470 h=300]

Restringindo a entrada caracteres em um inputText com ActionScript 3.0

InputText faz parte da classe TextField que é responsável pela exibição de entrada de texto no conteúdo Flash. Então vamos para o nosso tutorial express, criei uma class com o nome de TextExample esse primeiro passo vamos adicionar um campo de texto ao palco vou comentar todo o código.

A propriedade que restringe a entrada de dados é “.restrict” ela recebe uma String. Quando ele não é definido ele aceita qualquer tipo de entrada, para permitir uma sequência de caracteres usamos o hífen “-“, por exemplo, se que quiser permitir apenas números em meu campo de texto vou usar “0-9”, se quiser umas apenas letras minúsculas “a-z”.
Para negar a permissão de um caracter específico usamos o acento circunflexo “^”, por exemplo, “^1-3” exclui a entrada dos números de 1 a 3. Vamos agora para a prática:

E o resultado seria o seguinte :

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2010/06/teste.swf w=450 h=100]

Se no exemplo acima quiséssemos excluir a entrada de algum caracter funcionaria da forma abaixo:

Esse exemplo também seria aplicável em qualquer tipo de caracter, fechamos por aqui esse tutorial.

Away3D Flash Engine Básico

Olá Pessoa nesse tutorial, vamos falar da engine para 3D em Flash Away3D um dos concorrentes do Papervision, vou tentar seguir os mesmos passos dos tutoriais em PaperVision. Mas antes vamos falar um pouco sobre 3D.

3D ou terceira dimensão, nos gráficoes 3D no temos o conjunto das 3 coordenadas x, y e Z, o elemento mais básico em um ambiente 3D é o Vértice é um ponto no espaço que possui as coordenadas x , y e Z. com a união dos vertices nós podemos criar um objeto.

O objeto com menor nível de detalhe é o triangulo que é a união de 3 vértices, em 3D os triângulos também são chamados de faces. Por um nível de processamento melhor os triangulos são vistos apenas e um lado.

Com a união de vários triangulos podemos montar qualquer tipo de modelo 3D , esferas, cubos, cones, planos entre outras formas mais complexas, o programador pode criar novas formas com a junção de varios tringulos mas para isso é aconselhavel utilizar uma ferramenta de modelagem, como Blender, Maya ou 3D Max e exportar no formato collada. O Blender já possui forma de exportar direto um objeto modelado para actionScript.

Um elemento importante em 3D é camera, a camera é a nossa visão no ambiente 3D o que a gente vai ver no ambiente vai ser controlado pela câmera, uma das dificuldades de quem está começando é que nem sempre o que você insere na Cena é no tamanho equivalente que você criou, isso está relacionado a visão da camera, se ela estiver longe do objeto que vc criou então seu objeto ficará menor que o tamanho real.

Outra caracteristica importante são as texturas nada menos que a a cobertura dos objetos. A textura pode ser uma imagem ou apenas uma cor, mas essa montagem da textura é bastante complexa, os triangulos que formam o objeto são preenchidos com parte da imagem fornecida pela textura, e aplicada a pespectiva para dar noção de profundidade, se o objeto possuir poucas faces ele pode apresentar distorções, lembrando aumento de faces(triangulos) consequentemente o aumenta no processamento,por isso é muito importante achar um ponto em ideal.

Depois de toda essa história sobre 3D vamos ao código.

Primeiro preparar nosso projeto.
1 – Baixando a engine no site: http://away3d.com/downloads o away está hoje na sua versão 2.4.
2 – Descompacte o zip , jogue a pasta” away3d” no diretório do seu projeto.

A sequencia de passos é bastante parecido com Papervision, configurar View, Camera, Objetos e suas respectivas coberturas e renderizar tudo.

No primeiro Exemplo eu so vou trabalhar com View3d e Sphere apenas o código já está todo comentado:

Testando o resultado será o seguinte:

[flash https://www.fellyph.com.br/blog/wp-content/uploads/2010/03/main.swf w=470 h=350]

Próximos posts vamos falar mais.

Obs. esse post ta em rascunho a 5 meses… kkkkkkkk