Construindo uma Web mais compatível

Você já acessou um site e o design (ou alguma funcionalidade) estava inconsistente? Talvez estivesse OK, mas então você abriu um certo navegador (geralmente o Internet Explorer, vamos ser honestos) e aí o site não funciona? Talvez você seja um desenvolvedor e saiba como corrigir o problema, mas não sabe como entrar em contato com o proprietário do site. Eu já estive nessas situações também, e talvez esta pode ser a nossa solução.

A compatibilidade na Web se trata de garantir que os sites funcionem consistentemente em todos os navegadores e dispositivos, e às vezes, com alguns testes e alguns pequenos ajustes no site, os desenvolvedores podem garantir que mais usuários possam ter a experiência desejada. Pensando nisso, a Mozilla lançou https://webcompat.com, um site que é um convite aberto para todos os usuários da web, desenvolvedores e fornecedores de navegadores para se envolverem no esforço de compatibilidade da web.

Com extensões para Chrome e para Firefox, o usuário pode facilmente compartilhar um problema de site com a comunidade, para que eles possam trabalhar com a solução e entrar em contato com o proprietário do site para sugerir a correção, ou talvez seja um problema do navegador, então eles entrarão em contato com o desenvolvedor do navegador. Envio de problemas também são feitos sem plugin, através do próprio site do WebCompat.

Com o Web Compat, você pode contribuir de três maneiras: Reportando um Bug, Diagnosticando um bug, Tentando contato com o proprietário/desenvolvedor do site. Há outra maneira de contribuir que é contribuindo com o próprio site Web Compat, contribuições são sempre bem-vindas.

Se você quiser saber mais, siga WebCompat no twitter, faça seu login no site, envie uma mensagem para a equipe do WebCompat. Se você puder participar, a Mozilla Brasil estará no FGSL em 19 de novembro, e lá você pode ter alguma experiência real com este e outros projetos Mozilla.

Banner de Divulgação do FGSL 2016
Banner de Divulgação do FGSL 2016

Ajude a construir o Firefox com o Test Pilot

Firefox Test Pilot
Firefox Test Pilot

Antes de lançar novos recursos no navegador, o Firefox lança esses recursos em uma extensão chamada Test Pilot para que possamos testar e dar aos engenheiros e criadores algum feedback. Em outras palavras, você pode realmente ajudar a construir o Firefox, dando sua opinião sobre novos recursos.

A Mozilla acredita em uma Internet aberta e acessível para todos, sempre comprometida com a privacidade, a escolha do usuário e o desenvolvimento Open Source. Essas idéias tornam o Firefox a melhor escolha hoje. Mas é difícil obter feedback dos usuários levando em consideração o compromisso da Mozilla com a privacidade, então é por isso que eles fizeram o Test Pilot.

Com o Test Pilot você escolhe quais recursos quer testar, você pode ler sobre os dados que a Mozilla coleta para cada experiência e dizer-lhes o que você acha. Test Pilot é mais do que apenas um aplicativo da web para testar novas coisas. É um processo de pesquisa, design e desenvolvimento que visa tornar o desenvolvimento de recursos um processo mais suave e transparente.

Este processo consiste em quatro fases. Na primeira fase, a equipe do Test Pilot prototipa e valida as ideias. Na segunda fase, eles projetam e constroem o experimento. A terceira fase é o lançamento do experimento, é quando nós usuários entramos no jogo. A Mozilla monitora as estatísticas e ouve nosso feedback, para lapidar o recurso para que ele possa ficar perfeito. No momento, o Test Pilot tem os seguintes experimentos:

  • Page Shot: Permite tirar fotos do site que você está navegando, recortar e compartilhar.
  • Min Vid: Cria uma miniatura do vídeo que você está assistindo para que você possa assistí-lo enquanto navega em outros sites.
  • Tracking Protection: É como se estivesse navegando privado sem utilizar uma janela privada.
  • Activity Stream: Mostra sua atividade recente, destaques e top sites baseados em seu histórico e favoritos toda vez que você abrir uma nova aba.
  • Tab Center: Agrupa suas abas abertas na parte esquerda do navegador.
  • No More 404s: Tenta obter uma versão antiga de um link quando ele não está disponível mais.
  • Universal Search: Ao digitar algo na barra de endereço, ele mostra sites, pessoas e artigos na Wikipédia.

Quer saber mais? Alguns membros da Mozilla Brasil estarão na FGSL e eles mostrarão como se envolver mais. Se você não puder participar, verifique o Test Pilot no twitter, Test Pilot no Github e TestPilot no Discourse.

Banner de Divulgação do FGSL 2016
Banner de Divulgação do FGSL 2016

 

Realidade Virtual com o A-FRAME

Pewdiepie trying out VR Game in Public
Pewdiepie trying out VR Game in Public

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

Banner de Divulgação do FGSL 2016
Banner de Divulgação do FGSL 2016