Universos paralelos com JS

Gamer, future Suicide Girl and Front-end Dev @TheSweet_Lari Larissa Abreu
@LarissaAbreu [complete aqui] Nem eu!

Coisas de criança

HTML é coisa de criança! - Otário desconhecido

Quem trabalha com HTML Não é programador de verdade! -
Mais otário ainda

Um profissional deve se preocupar muito com a semântica pois
ela é fundamental para questões de acessibilidade e de possíveis milhares de acessos vindos de um bom SEO. Em outras palavras, dizer que “HTML é coisa de criança” de forma pejorativa, faz de quem diz, uma pessoa completamente idiota. - Pacifer, Afonso

Quando todos Começamos

index.html Primeiro contato! <h1> Olá mundo! </h1>

Segundo contato!

Todos tem as Mesmas oportunidades?

VR para todos? Desafio Artistas, designers, educadores, criadores, crianças, etc…

aframe.io/ O A-Frame é um framework web para construir experiências
de realidade virtual (VR).

<html> <head> </head> <body> </body> </html> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <a-scene> </a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> index.html

Resultado!

No celular!

No óculos!

Por que A-Frame?

VR de forma simples Basta colocar uma tag <script> e
<a-scene> que o A-Frame vai lidar com todo o 3D, configuração de VR e controles padrão. Nada para instalar, sem etapas de compilação..

HTML declarativo HTML é fácil de ler e entender.. Então
é só copiar e colar. Sendo, assim, acessível a todos: desenvolvedores da Web, entusiastas da VR, artistas, designers, educadores, criadores, crianças, etc...

Performance O A-Frame é otimizado desde o início para o
WebVR. Enquanto o A-Frame usa o DOM, seus elementos não tocam no mecanismo de layout do navegador.

Agnóstico de ferramentas Como a Web foi construída sobre a
noção de HTML, o A-Frame é compatível com a maioria das bibliotecas, estruturas e ferramentas… Incluindo React, Preact, Vue.js, d3.js, Ember.js, jQuery.

Inspetor Visual O A-Frame fornece um prático inspetor visual de
3D incorporado. Basta abrir qualquer cena A- Frame e pressionar <ctrl> + <alt> + i

Inspetor Visual

Através do html empodera

Demo larissaabreu.github.io/vr-demo/

Vá além do VR Crie seus próprios elementos HTML

polymer-project.org Uma biblioteca que facilita a criação de Web Components

Tudo é possível se você trocar os olhos que enxerga
o mundo! - Caixa de VR

Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu

Universos paralelos com JS

Universos paralelos com JS

Larissa Abreu

More Decks by Larissa Abreu

Other Decks in Programming

Featured

Transcript

Gamer, future Suicide Girl and Front-end Dev @TheSweet_Lari Larissa Abreu

Coisas de criança

HTML é coisa de criança! - Otário desconhecido

Quem trabalha com HTML Não é programador de verdade! -

Um profissional deve se preocupar muito com a semântica pois

Quando todos Começamos

index.html Primeiro contato! <h1> Olá mundo! </h1>

Segundo contato!

Todos tem as Mesmas oportunidades?

VR para todos? Desafio Artistas, designers, educadores, criadores, crianças, etc…

aframe.io/ O A-Frame é um framework web para construir experiências

<html> <head> </head> <body> </body> </html> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <a-scene> </a-scene>

Resultado!

No celular!

No óculos!

Por que A-Frame?

VR de forma simples Basta colocar uma tag <script> e

HTML declarativo HTML é fácil de ler e entender.. Então

Performance O A-Frame é otimizado desde o início para o

Agnóstico de ferramentas Como a Web foi construída sobre a

Inspetor Visual O A-Frame fornece um prático inspetor visual de

Inspetor Visual

Através do html empodera

Demo larissaabreu.github.io/vr-demo/

Vá além do VR Crie seus próprios elementos HTML

polymer-project.org Uma biblioteca que facilita a criação de Web Components

Tudo é possível se você trocar os olhos que enxerga

Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu