Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Universos paralelos com JS

Universos paralelos com JS

Todo mundo vive dizendo das coisas maravilhosas que podemos fazer com o JavaScript. Mas você sabia que podemos utilizá-lo para nos ajudar a empoderar pessoas e fazê-las acreditar que elas também conseguem "chegar lá"? Vem comigo nessa jornada explorar uma das várias maneiras que temos de levar a internet realmente para todos através do A-frame e dos componentes nativos.

Larissa Abreu

June 21, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

  1. View Slide

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

    View Slide

  3. Coisas de
    criança

    View Slide

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

    View Slide

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

    View Slide

  6. 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

    View Slide

  7. Quando todos
    Começamos

    View Slide

  8. index.html
    Primeiro
    contato!
    Olá mundo!

    View Slide

  9. Segundo
    contato!

    View Slide

  10. Todos tem as
    Mesmas
    oportunidades?

    View Slide

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

    View Slide

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

    View Slide















  13. index.html

    View Slide

  14. Resultado!

    View Slide

  15. No celular!

    View Slide

  16. No óculos!

    View Slide

  17. Por que
    A-Frame?

    View Slide

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

    View Slide

  19. 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...

    View Slide

  20. 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.

    View Slide

  21. 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.

    View Slide

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

    View Slide

  23. Inspetor Visual

    View Slide

  24. Através do html
    empodera

    View Slide

  25. Demo
    larissaabreu.github.io/vr-demo/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. Thanks!
    #UseThePlatform
    @TheSweet_Lari
    @LarissaAbreu

    View Slide