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

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

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