Tribo do C.I.

Só mais um blog de informática (só que não)

Realidade Virtual com o A-FRAME

novembro 17th, 2016

Realidade virtual está se tornando a sensação do momento! Vários dispositivos VR estão sendo vendidos e cada smartphone moderno pode rodar coisas de VR. Você provavelmente já viu algum vídeo gravado com a Samsung gear 360, por exemplo. Isso está disponível no YouTube (e em alguns vídeos/fotos do Facebook) e você pode experimentá-lo com qualquer dispositivo ‘smart’ e em seu navegador de computador, arrastando e soltando a posição do vídeo com o mouse.

Mas a melhor coisa para nós geeks é quando somos capazes de realmente fuçar a coisa, mexer e construir do nosso próprio jeito. Quando se trata de Realidade Virtual, a maneira mais legal de fazer isso é usando esse incrível framework chamado A-Frame.

A-Frame é uma estrutura open-source WebVR para criar experiências de realidade virtual (VR) com HTML. Podemos construir cenas de VR que funcionam em smartphones, desktop, o Oculus Rift e o HTC Vive.”

A-Frame não é tão novidade, ele está disponível há algum tempo e já tem vários vídeos, artigos e componentes disponíveis para você não apenas começar, mas realmente se envolver e desenvolver coisas incríveis. Estou escrevendo este artigo para compartilhar minha experiência como iniciante com A-Frame, mas antes começarmos, se você já está interessado, você vai querer dar uma olhada na comunidade Slack do A-Frame e no grupo do A-Frame no Telegram. Lá compartilhamos nossas experiências, dúvidas e ajudamos um ao outro. Cuidado pois todas as conversas são em inglês.

WebVR e A-Frame foram construídos pela equipe de VR da Mozilla para tornar mais rápida e fácil a criação de conteúdo 3D/VR e facilitar a introdução da Comunidade da Web no mundo VR. E é realmente fácil começar com A-Frame, você só precisa primeiro adicionar a Biblioteca em seu projeto:

$ npm install aframe

or, use the direct link
https://aframe.io/releases/0.3.2/aframe.min.js

Depois de adicionada a biblioteca no seu projeto, você pode começar a escrever alguns componentes facilmente:

<a-scene>
  <a-box color="#AAA" width="2" height="2" depth="5"></a-box>
</a-scene>

Com este pedaço de código, você criou uma cena com uma caixa cinza nela. Se você estiver rodando no seu Navegador Desktop, você pode usar as teclas W A S D para se deslocar na cena e ver a caixa de perspectivas diferentes. Dentro desta cena, você pode criar qualquer componente que você quer, por exemplo, você pode duplicar esta caixa.

<a-scene>
  <a-box color="#AAA" width="2" height="2" depth="5"></a-box>
  <a-box color="#16a085" width="2" height="2" depth="5"></a-box>
</a-scene>

Observe agora que, executando este código acima, você está vendo apenas a caixa verde. Isso aconteceu porque as caixas estão colocadas na mesma posição na cena. Como estamos em um mundo 3D, as coisas têm valores X Y e Z para definir a sua posição. A cena começa na posição = “0 0 0” e esta também é a posição padrão para os componentes que criamos. Então, agora vamos ver todo o exemplo HTML com posições diferentes para as caixas.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Hello World - A-FRAME</title>
</head>
<body>
  <a-scene>
    <a-sky color="#34495e"></a-sky>
    <a-box position="-4 0 -8" color="#AAA" width="2" height="2" depth="5"></a-box>
    <a-box position="4 0 -8" color="#16a085" width="2" height="2" depth="5"></a-box>
  </a-scene>
</body>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</html>

Neste exemplo também adicionei outro elemento (a-sky) que funciona basicamente como o fundo da cena. Você pode facilmente colocar uma imagem ao invés de uma cor.

<a-sky src="image.jpg"></a-sky>

Uma imagem pode ser usada em qualquer componente. Em relação aos valores de posição, devemos entender que o eixo X se estende negativamente para a esquerda e positivamente para a direita, o eixo Y se estende positivamente para cima e negativamente para baixo, e o eixo Z se estende negativamente para fora da tela e positivamente para dentro da tela. Eu mudei este exemplo e coloquei uma caixa em cada posição da tela (frente, traz, esquerda e direita) para que você possa vê-lo em execução e brincar com esse exemplo. Você pode verificar meu exemplo no Codepen ou baixar meu repositório sobre VR no Github.

Eu não sei por que, mas eu simplesmente não consigo rodar os exemplos do codepen corretamente no meu smartphone, então eu deixei este exemplo disponível na página Github do meu repositório ‘HeyVR’. Este repositório é apenas um conjunto de exemplos usando A-Frame. Eu também adicionei nesta página um componente a-light para representar o sol na imagem que eu coloquei no a-sky.

Eu não quero fazer esta introdução muito grande, eu acho que isso é suficiente para despertar o interesse sobre esta grande ferramenta e começar a construir uma Web VR. Se você quiser continua, eu aconselho você a ir para um guia A-Frame com HTML, que é bastante interessante e você será capaz de fazer muito mais coisas como posição, rotação e escala.

Curtiu?! Então entre na comunidade Slack do A-Frame e no grupo do A-Frame no Telegram. Envolva-se e divirta-se na Web VR.

A comunidade Mozilla Brasil estará na FGSL para falar sobre A-Frame em 18 e 19 de novembro. Para ser exato, este tópico será apresentado em 19 de novembro na sala 3 às 15h. Você deve ir =) será incrível. Vamos compartilhar tudo usando a hashtag #MozillaNoFGSL

Dica rápida: campo de senha

janeiro 15th, 2016

É muito legal e causa muita confusão aos leigos (bem leigos) preencher o campo de senha em um formulário. Eu já fui professor de idosos e eles sempre ficavam intrigados por digitarem e, na verdade, só aparecer bolinhas na tela. Com a popularização dos smartphones essa prática deve ser repensada.

Não significa que o campo de senha tem que ser abolido, pois ele impede que quem quer que esteja ao seu lado saiba sua senha. No smartphone o campo de senha não é prático por dois motivos básicos:

  • O usuário quase sempre erra o que digita no celular, e não tem como ele checar sua senha.
  • Não é tão seguro assim para o curioso ao seu lado, pois ao pressionar o teclado, a letra aparece na tela por uma fração de segundo antes de virar uma bolinha.

A solução mais simples e mais usada para isso é deixar o campo de senha como está, e incluir uma opção de mostrar a senha. Assim o usuário pode digitar a senha mais à vontade e depois dar uma conferida se digitou corretamente. Essa prática se tornou tão comum que a microsoft a adotou como padrão em todo campo de senha do Windows 8.

Em 2016 eu iniciei uma idéia maluca de criar o projeto #366DailyCode, que consiste em publicar 1 pedaço de código JavaScript por dia (geralmente um problema ou algoritmo conhecido). Isso é assunto para outro post, o fato é que eu tornei essa opção de mostrar a senha o código do dia 14/01/2016. Você pode checá-la em prática abaixo:

See the Pen #366DailyCode #Day14?—?Input type password by Sheldon Led (@sheldonled) on CodePen.

FULLSTACK API – Ou o que aprendi com o MEAN.

junho 11th, 2015

Muito se ouve falar de API’s, e termos como API First, ou Offline API. É um conceito muito bacana, do qual não vou entrar em detalhes aqui pois basta você pesquisar um pouco e achará centenas de artigos falando sobre isso, em Portuguêsem Inglês, ou qualquer outra língua. Não só porque tem muito material já disponível, mas porque esse material disponível já descreve muito bem sobre isso, então eu só quero detalhar um pouco do que eu aprendi, sabendo que talvez não acrescentará em nada, mas pode ajudar quem esteja começando, assim como eu.

Eu sou uma pessoa que estuda pouco, porém sobre muitas coisas, e só entro em mais detalhes quando preciso. Então muita gente me acha inteligente, mas sou apenas curioso, e foi assim que, há um tempo atrás eu precisei/quis aprender NodeJS e AngularJS. Foi quando eu descobri a STACK (conjunto de tecnologias para se desenvolver determinada solução) MEAN (MongoDB, ExpressJS, AngularJS e NodeJS).

Esse termo (MEAN) é muito conhecido, basta você “googlar” e verás. Mas o que está por trás dessa ideia, eu (e creio que todo mundo que estudou o MEAN) descobri rapidinho: trabalhar com API. Mas que diabos é trabalhar com API? Também não vou entrar em detalhes, mas basicamente, nesse contexto que estamos inseridos, ao trabalhar com API, você cria um conjunto de rotinas/funções/métodos padrão, e isso vai ser o núcleo (core) do seu sistema. A partir de então, você desenvolve um elo entre o usuário e o core do seu sistema, esse elo é chamado de Cliente. Se sua API está online (de novo, no contexto desse artigo, presumiremos que sim), então você pode fazer vários tipos de clientes para acessá-la, como, cliente web, para Android, iOS, para Windows, Linux etc.

api first

Esse negócio de se trabalhar com API começou com grandes softwares. Eu vi, pela primeira vez, em redes sociais, como Twitter e Facebook. Isso foi testado e aprovado por programadores, que foram passando essa experiência ao longo dos anos e hoje em dia é uma tendência altíssima trabalhar dessa forma. Sendo assim, vamos somente recapitular, alguns benefícios de se construir o seu software no formato API:

  • Multiplataforma: também pode ser entendido como generalismo. É muito mais fácil criar uma versão de seu software para uma outra plataforma, pois o core do seu software já está pronto, de forma genérica, basta criar o cliente na plataforma desejada, para conversar com ele.
  • Consistência: Existe um padrão, único, no seu software, e todos os objetos e a arquitetura do seu software já estão bem definidos.
  • Modularidade: É muito mais fácil dividir seu software em módulos, ou em níveis de acesso, e distribuir essa divisão entre os clientes, pois você praticamente alterará somente um lugar

Voltando ao MEAN, você acha facilmente artigos para aprender essas tecnologias, eu particularmente gosto desse artigo da Caelum. Mas se você parar para pensar, o que é o MEAN?

  1. Um banco de dados (MongoDB)
  2. Uma biblioteca para obtenção, tratamento, roteamento etc, das requisições dos clientes (ExpressJS)
  3. Uma biblioteca para se construir seu cliente, nesse caso, web (AngularJS)
  4. Um servidor web (NodeJS)

Então porque o MEAN ficou tão famoso? Pelo fato de que, ao se trabalhar com qualquer uma dessas tecnologias, você só precisa ter conhecimento JavaScript, pois tudo o que mencionei é baseado nessa linguagem. Mas para trabalhar com API, não necessariamente você precisa pegar uma STACK pronta, você pode adaptar o que você já está acostumado à ideia de API.

Pensando nisso, eu peguei as tecnologias mais comuns (LAMP – Linux, Apache, MySQL e PHP) e adaptei à ideia de API. Transcrevendo a ideia do MEAN, o Apache preenche o item 4, o PHP preenche o item 2, o MySQL preenche o item 1 e o item 3 pode ser preenchido por qualquer biblioteca cliente que você quiser, inclusive o próprio AngularJS. Então meu MEAN virou um MPAA (MySQLPHPAngularJS, Apache).

Nessa ideia, eu criei uma webapp que faz a mesma coisa que o exemplo do artigo da Caelum, e disponibilizei para qualquer um poder estudar e aprimorar a ideia. Segue os links:

  1. Exemplo de aplicativo usando MEAN;
  2. Exemplo de aplicativo usando MPAA;

Espero que esses links possam ajudá-lo nos seus estudos.

 
zoloft kids. zoloft 25 mg to 50 mg . buy zoloft online no prescription. cheap zoloft. is paxil or zoloft better for anxiety. zoloft 25 mg. 25 mg zoloft during pregnancy.
Best Prices For All Customers! Prednisone Cost Cvs. Instant Shipping, buy prednisone.
by: Chaille Jolink On a buy prednisone online very busy day at the capitol on Tuesday, over 400 advocates for buy prednisone online women met with their 

order cialis – Online Cialis Usually, they quickly pass and are not dangerous for male health. However this may break a constant process of the vital functions.The …
clomid ebola clomid without prescription
buy estrace online, Is There A Generic Estradiol Cream, Estrace Generic La version integrale d’une heure est disponible sur demande aupres de la 

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)