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

Tudo o que a web (podia ser) ainda será

Tudo o que a web (podia ser) ainda será

Jean Carlo Emer

May 07, 2015
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

  1. Tudo  o  que  a  
    web  
    ainda  será
    podia  ser
    uma  análise  de  tecnologias

    View full-size slide

  2. jcemer.com  
    github.com/jcemer  
    twi5er.com/jcemer  
    speakerdeck.com/jcemer

    View full-size slide

  3. porto  alegre

    View full-size slide

  4. Espaço  em  que  as  interações  
    entre  humanos  e  máquinas  
    acontecem
    Interface  de  usuário
    h"p:/
    /en.wikipedia.org/wiki/User_interface

    View full-size slide

  5. $_
    Linha  de  

    comando

    View full-size slide

  6. $_
    Linha  de  

    comando
    x
    x
    Aplicações  
    na?vas

    View full-size slide

  7. $_
    Linha  de  

    comando
    x
    x
    Aplicações  
    na?vas
    ENCONTRO
    LOCAWEB


    CONHEÇA OS
    PALESTRANTES
    Web
    x

    View full-size slide

  8. 1. Tecnologias  para  
    criação  de  interfaces  
    2. Evolução  e  situação  

    das  tecnologias  web  
    3. NaCvo  vs  Web  
    4. PerspecCvas  futuras  

    da  web  

    View full-size slide

  9. Tecnologias  para  
    criação  de  interfaces  
    de  linha  de  comando

    View full-size slide

  10. #!/usr/bin/env bash
    set -e
    issue_number="$1"
    usage() {
    echo "git test "
    }
    if [ -z "$issue_number" ]; then
    usage
    exit 1
    fi
    git fetch --prune
    remote_branch="$(git branch -a | grep remotes | grep $issue_number | cat)"
    if [ -z "$remote_branch" ]; then
    echo "Issue $issue_number not found"
    exit 1
    fi
    remote_branch="${remote_branch##*/}"
    git checkout ${remote_branch}
    h"ps:/
    /github.com/juanibiapina/git-­‐flow

    View full-size slide

  11. Tecnologias  para  
    criação  de  interfaces  
    naCvas

    View full-size slide

  12. #include
    static void
    activate (GtkApplication *app,
    gpointer user_data) {
    GtkWidget *window;
    GtkWidget *button;
    GtkWidget *button_box;
    window = gtk_application_window_new (app);
    gtk_window_set_title (GTK_WINDOW (window), "Window");
    gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
    button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL);
    gtk_container_add (GTK_CONTAINER (window), button_box);
    button = gtk_button_new_with_label ("Hello World");
    g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL);
    g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy)

    , window);
    gtk_container_add (GTK_CONTAINER (button_box), button);
    gtk_widget_show_all (window);
    }
    int
    main (int argc, char **argv) {
    /* ... */
    }
    h"ps:/
    /developer.gnome.org/gtk3/stable/gtk-­‐
    ge@ng-­‐started.html

    View full-size slide

  13. Programadores  que  não  entendem  
    Cobol  são  arrastadores  de  objetos
    h"ps:/
    /www.youtube.com/watch?v=EK49T77VQOQ

    View full-size slide

  14. Tecnologias  atuais  
    para  criação  de  
    interfaces  

    naCvas

    View full-size slide

  15. xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="io.embarque.embarque.activities.AccurateFeedback">
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    android:id="@+id/cover"
    android:layout_width="match_parent"
    android:layout_height="110dp" />
    android:id="@+id/layer"
    android:layout_width="match_parent"
    android:layout_height="110dp"
    android:background="@drawable/backbar"/>

    View full-size slide

  16. Linguagens  de  programação  
    maduras  mas  com  uma  definição  
    de  interface  engessada  
    uClizando  XML

    View full-size slide

  17. Tecnologias  web  
    atuais  para  criação  
    de  interfaces

    View full-size slide

  18. HTML  &  CSS  
    (&  SVG)

    View full-size slide




  19. ActiveReports Document


    <br/>@page{size: 8.5in 11in;margin-top:0.2in;margin-left:0.8in;margin-right:<br/>0.4in;margin-bottom:0.2in;}<br/>

    Nils Ericsonsgymnasiet
    span>
    FP1AMA1201

    Nr
    span>

    View full-size slide

  20. HTML Canvas Audio

    Video
    App  

    Cache
    Input

    types
    CSS  2 Transforms AnimaCon Gradient Flexbox Filter
    SVG
    Especificações

    View full-size slide

  21. Responsive  

    Design
    Sistemas  de  

    escrita  de  CSS
    WAI-­‐ARIA
    Microformats
    Padrões

    View full-size slide

  22. HTML  &  CSS  
    (&  SVG)
    As  tecnologias  evoluíram  e  são  
    uma  óCma  opção

    View full-size slide

  23. function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&ix.src=x.oSrc;
    }
    function MM_preloadImages() { //
    v3.0document.getElementById('navcontainer').style.visibility = 'hidden';
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
    iif (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document;
    if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&ix=d.forms[i][n];
    for(i=0;!x&&d.layers&&ix=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
    for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
    x.oSrc=x.src; x.src=a[i+2];}
    }

    View full-size slide

  24. Apesar  de  ser  uma  linguagem  muito  
    fácil  de  aprender  e  escrever,  o  
    JavaScript  nasceu  com  uma  série  de  
    deficiências

    View full-size slide

  25. JS Object

    properCes
    Array  

    manipulaCon
    Arrow  

    funcCons
    Block

    scoping
    Classes Default

    parameter

    values
    Destructuring  

    Assignments
    Iterators
    Generators Modules Rest  

    parameters
    Spread

    operator
    Template

    strings
    Especificações

    View full-size slide

  26. JavaScript
    A  tecnologia  evoluiu  e  
    atualmente  é  uma  boa  opção

    View full-size slide

  27. DHTML jQuery Backbone.js AngularJS
    Ember.js D3.js
    QUnit React JSBlocks
    Bibliotecas  e  
    frameworks

    View full-size slide

  28. JavaScript
    A  comunidade  evoluiu  a  
    maneira  de  uClizar  a  tecnologia

    View full-size slide

  29. jQuery

    plugins
    Twiier

    Bootstrap
    Zurb

    FoundaCon
    AngularJS

    DirecCves
    jQueryUI
    Componentes  
    de  interface

    View full-size slide

  30. HTML  &  

    CSS  &  
    JS
    As  tecnologias  e  comunidade  
    evoluíram,  as  tecnologias  são  uma  
    óCma  opção

    View full-size slide

  31. NaCvo  vs

    Web

    View full-size slide

  32. Acesso  a  recursos  de  

    entrada  e  saída  
    São  estes  recursos  que  permitem  
    a  interface  humano  e  máquina

    View full-size slide

  33. HTML  5  
    JavaScript  APIs

    View full-size slide

  34. JavaScript  em  

    2011  +  APIs
    JavaScript  

    em  2008

    View full-size slide

  35. Captura  e  

    geração  de  áudio  
    Comandos  de  

    voz  
    Controle  por

    toque  
    Captura  de  

    imagem
    NaCvo  
    Web

    View full-size slide

  36. Web  Audio  API  &

    getUserMedia()
    Permitem  capturar,  processar  e  
    sinteCzar  áudio

    View full-size slide

  37. Web  Audio  API  &

    getUserMedia()
    Permitem  capturar,  processar  e  
    sinteCzar  áudio
    navigator.getUserMedia({ audio: true },
    onStream,
    onStreamError);
    h"p:/
    /webaudioapi.com

    View full-size slide

  38. Web  Speech  API
    Ainda  bem  incipiente  mas  uma  
    óCma  promessa
    h"p:/
    /updates.html5rocks.com/2013/01/Voice-­‐Driven-­‐
    Web-­‐Apps-­‐IntroducUon-­‐to-­‐the-­‐Web-­‐Speech-­‐API

    View full-size slide

  39. getUserMedia()
    Permite  capturar  e  processar  
    imagens  e  vídeos

    View full-size slide

  40. getUserMedia()
    Permite  capturar  e  processar  
    imagens  e  vídeos
    navigator.getUserMedia({ video: true },
    function (stream) {
    video.src = window.URL.createObjectURL(stream);
    }
    );
    h"p:/
    /www.html5rocks.com/en/tutorials/getusermedia/intro

    View full-size slide

  41. Controle  por

    toque  
    Geolocalização  
    Controle  de  

    vibração
    NaCvo

    Mobile  
    Web

    View full-size slide

  42. Touch  Events
    Vetor  de  eventos  gerados  através  
    de  toques  na  interface

    View full-size slide

  43. Touch  Events
    Vetor  de  eventos  gerados  através  
    de  toques  na  interface
    el.addEventListener("touchstart", handleStart, false);
    el.addEventListener("touchend", handleEnd, false);
    el.addEventListener("touchcancel", handleCancel, false);
    el.addEventListener("touchleave", handleEnd, false);
    el.addEventListener("touchmove", handleMove, false);

    View full-size slide

  44. GeolocaCon  API
    Acessa  a  localização  através  
    do  GPS,  IP  e  wifi

    View full-size slide

  45. GeolocaCon  API
    Acessa  a  localização  através  
    do  GPS,  IP  e  wifi
    navigator.geolocation.getCurrentPosition(function (position) {
    position.coords.latitude;
    position.coords.longitude;
    });
    h"ps:/
    /developer.mozilla.org/en-­‐US/docs/Web/API/
    GeolocaUon/Using_geolocaUon

    View full-size slide

  46. VibraCon  API
    Permite  gerar  um  feedback  táCl

    View full-size slide

  47. VibraCon  API
    Permite  gerar  um  feedback  táCl
    navigator.vibrate([50, 100, 150]);
    h"p:/
    /davidwalsh.name/vibraUon-­‐api

    View full-size slide

  48. EmiCr  

    noCficações  
    Condição  da  

    conexão  
    Condição  da  

    bateria
    NaCvo

    Mobile  
    Web

    View full-size slide

  49. NoCficaCon  API
    Permite  disparar  uma  noCficação  
    para  o  navegador

    View full-size slide

  50. NoCficaCon  API
    Permite  disparar  uma  noCficação  
    para  o  navegador
    var notification = new Notification(title, options);
    h"ps:/
    /developer.mozilla.org/en/docs/
    Web/API/noUficaUon

    View full-size slide

  51. Online  /  Offline  

    Status  e  Events
    Permitem  checar  e  monitorar  a  
    conexão  com  a  Internet

    View full-size slide

  52. Online  /  Offline  

    Status  e  Events
    Permitem  checar  e  monitorar  a  
    conexão  com  a  Internet
    navigator.onLine;
    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    h"ps:/
    /developer.mozilla.org/en-­‐US/docs/
    Online_and_offline_events

    View full-size slide

  53. Baiery  Status  API
    Permitem  checar  e  monitorar  a  
    bateria  do  disposi?vo

    View full-size slide

  54. Baiery  Status  API
    Permitem  checar  e  monitorar  a  
    bateria  do  disposi?vo
    navigator.getBattery().then(function(battery) {
    battery.charging;
    battery.level;
    battery.chargingTime;
    battery.dischargingTime;
    battery.addEventListener('levelchange', function() {});
    });

    View full-size slide

  55. Sensores  de

    movimento  
    Acesso  a

    Fullscreen  
    Capturar

    luminosidade  
    ...
    h"p:/
    /mobilehtml5.org

    h"p:/
    /html5please.com
    NaCvo

    Mobile  
    Web

    View full-size slide

  56. A  maioria  dos  recursos  naCvos  estão  
    disponíveis  através  de  APIs

    View full-size slide

  57. PerspecCvas  
    futuras

    View full-size slide

  58. Web  
    Components

    View full-size slide

  59. Permite  isolar  código  HTML  o  
    mantendo  livre  de  interferências  
    da  página
    Shadow  DOM

    View full-size slide



  60. Porto Alegre
    Brasil - RS


    Porto Alegre

    Brasil - RS

    View full-size slide

  61. Permitem  definir  e  assisCr  ao  
    ciclo  de  vida  de  elementos
    Custom  Elements

    View full-size slide


  62. <br/>document.querySelector('img').src = 'diego.jpg'<br/>

    View full-size slide

  63. Elemento  criado  
    Adicionado  ou  

    removido  do

    DOM  
    Alteração  nos  

    atributos
    Custom  

    Elements

    View full-size slide

  64. Muta?on  Observers  oferece

    maior  poder  e  controle  dos  
    elementos  e  atributos  do  DOM
    h"ps:/
    /developer.mozilla.org/en/docs/Web/API/
    MutaUonObserver
    *

    View full-size slide

  65. h"ps:/
    /speakerdeck.com/jcemer/
    componentes-­‐para-­‐a-­‐web

    View full-size slide

  66. Data  binding

    View full-size slide

  67. Conexão  entre  a  lógica  de  
    negócio  da  aplicação  e  sua  
    interface  de  usuário
    Data  binding

    View full-size slide

  68. ESTADOS
    CIDADES

    View full-size slide

  69. ESTADOS
    CIDADES
    JS
    SERVER

    View full-size slide

  70. ESTADOS
    CIDADES
    var model = { cities: [] };
    $('#state').on('change', function () {
    model.cities = [

    'Porto Alegre', 

    'Canoas'

    ];
    });
    Object.observe(model, function () {
    // check changes and update cities
    });
    h"ps:/
    /jsfiddle.net/p0857yyt

    View full-size slide

  71. h"p:/
    /leobalter.github.io/

    data-­‐binding-­‐slides/output/#1

    View full-size slide

  72. Service

    Workers

    View full-size slide

  73. Serviços  instalados  por  uma  
    página  web  que  são  manCdos  
    pelo  navegador
    Service  workers

    View full-size slide

  74. Os  Service  Workers  poderão  
    interceptar  chamadas  a  rede  e  
    manter  um  cache  permanente  de  
    requisições
    Experiência  

    Offline  rica

    View full-size slide

  75. ENCONTRO
    LOCAWEB


    CONHEÇA OS
    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    INSCREVA-SE
    PREENCHENDO
    SEUS DADOS
    ABAIXO
    x
    SERVICE WORKER
    CACHE

    View full-size slide

  76. ENCONTRO
    LOCAWEB


    CONHEÇA OS
    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    INSCREVA-SE
    PREENCHENDO
    SEUS DADOS
    ABAIXO
    x
    SERVICE WORKER
    CACHE

    View full-size slide

  77. Service

    Workers
    Background

    Sync
    Push  

    NoCficaCons
    Geofencing  e  

    Alarmes
    Especificações
    de  API

    View full-size slide

  78. h"p:/
    /www.slideshare.net/
    caelumdev/serviceworkers-­‐sergio

    View full-size slide

  79. The  Web  may  not  be  the  only  way  to  deliver  
    so5ware,  but  it's  one  that  works  now  and  
    will  con+nue  to  work  for  a  long  +me.    
    Web-­‐based  applicadevelop,  and  easy  for  even  the  smallest  
    startup  to  deliver.  
    Paul  Graham
    Setembro  de  2001
    h"p:/
    /www.paulgraham.com/road.html

    View full-size slide

  80. Obrigado
    Always  bet  on  web!
    @jcemer even.tc/rsjs-­‐2015/?code=17elw

    View full-size slide