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 Slide

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

    View Slide

  3. porto  alegre

    View Slide

  4. View Slide

  5. View Slide

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

  7. $_
    Linha  de  

    comando

    View Slide

  8. $_
    Linha  de  

    comando
    x
    x
    Aplicações  
    na?vas

    View Slide

  9. $_
    Linha  de  

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


    CONHEÇA OS
    PALESTRANTES
    Web
    x

    View Slide

  10. 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 Slide

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

    View Slide

  12. #!/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 Slide

  13. Tecnologias  para  
    criação  de  interfaces  
    naCvas

    View Slide

  14. #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 Slide

  15. View Slide

  16. View Slide

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

    View Slide

  18. View Slide

  19. Tecnologias  atuais  
    para  criação  de  
    interfaces  

    naCvas

    View Slide

  20. View Slide

  21. View Slide






































  22. View Slide

  23. View Slide

  24. View Slide

  25. 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 Slide

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

    View Slide

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

    View Slide

  28. HTML  &  CSS  
    (&  SVG)

    View Slide




  29. 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 Slide

  30. HTML Canvas Audio

    Video
    App  

    Cache
    Input

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

    View Slide

  31. Responsive  

    Design
    Sistemas  de  

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

    View Slide

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

    View Slide

  33. JavaScript

    View Slide

  34. 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 Slide

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

    View Slide

  36. 1995

    View Slide

  37. 2008

    View Slide

  38. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. jQuery

    plugins
    Twiier

    Bootstrap
    Zurb

    FoundaCon
    AngularJS

    DirecCves
    jQueryUI
    Componentes  
    de  interface

    View Slide

  43. HTML  &  

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

    View Slide

  44. NaCvo  vs

    Web

    View Slide

  45. Acesso  a  recursos  de  

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

    View Slide

  46. HTML  5  
    JavaScript  APIs

    View Slide

  47. JavaScript  em  

    2011  +  APIs
    JavaScript  

    em  2008

    View Slide

  48. Captura  e  

    geração  de  áudio  
    Comandos  de  

    voz  
    Controle  por

    toque  
    Captura  de  

    imagem
    NaCvo  
    Web

    View Slide

  49. View Slide

  50. Web  Audio  API  &

    getUserMedia()
    Permitem  capturar,  processar  e  
    sinteCzar  áudio

    View Slide

  51. Web  Audio  API  &

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

    View Slide

  52. View Slide

  53. 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 Slide

  54. View Slide

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

    View Slide

  56. 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 Slide

  57. View Slide

  58. Controle  por

    toque  
    Geolocalização  
    Controle  de  

    vibração
    NaCvo

    Mobile  
    Web

    View Slide

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

    View Slide

  60. 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 Slide

  61. View Slide

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

    View Slide

  63. 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 Slide

  64. VibraCon  API
    Permite  gerar  um  feedback  táCl

    View Slide

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

    View Slide

  66. EmiCr  

    noCficações  
    Condição  da  

    conexão  
    Condição  da  

    bateria
    NaCvo

    Mobile  
    Web

    View Slide

  67. View Slide

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

    View Slide

  69. 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 Slide

  70. Online  /  Offline  

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

    View Slide

  71. 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 Slide

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

    View Slide

  73. 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 Slide

  74. Sensores  de

    movimento  
    Acesso  a

    Fullscreen  
    Capturar

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

    h"p:/
    /html5please.com
    NaCvo

    Mobile  
    Web

    View Slide

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

    View Slide

  76. View Slide

  77. PerspecCvas  
    futuras

    View Slide

  78. Web  
    Components

    View Slide

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

    View Slide


  80. @jcemer

    View Slide



  81. Porto Alegre
    Brasil - RS


    Porto Alegre

    Brasil - RS

    View Slide

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

    View Slide


  83. View Slide


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

    View Slide

  85. Elemento  criado  
    Adicionado  ou  

    removido  do

    DOM  
    Alteração  nos  

    atributos
    Custom  

    Elements

    View Slide

  86. 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 Slide

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

    View Slide

  88. Data  binding

    View Slide

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

    View Slide

  90. ESTADOS
    CIDADES

    View Slide

  91. ESTADOS
    CIDADES
    JS
    SERVER

    View Slide

  92. 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 Slide

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

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

    View Slide

  94. Service

    Workers

    View Slide

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

    View Slide

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

    Offline  rica

    View Slide

  97. ENCONTRO
    LOCAWEB


    CONHEÇA OS
    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    INSCREVA-SE
    PREENCHENDO
    SEUS DADOS
    ABAIXO
    x
    SERVICE WORKER
    CACHE

    View Slide

  98. ENCONTRO
    LOCAWEB


    CONHEÇA OS
    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    PALESTRANTES
    x
    ENCONTRO
    LOCAWEB


    INSCREVA-SE
    PREENCHENDO
    SEUS DADOS
    ABAIXO
    x
    SERVICE WORKER
    CACHE

    View Slide

  99. Service

    Workers
    Background

    Sync
    Push  

    NoCficaCons
    Geofencing  e  

    Alarmes
    Especificações
    de  API

    View Slide

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

    View Slide

  101. View Slide

  102. 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 Slide

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

    View Slide