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

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

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

May 07, 2015
Tweet

Transcript

  1. Tudo  o  que  a   web   ainda  será podia

     ser uma  análise  de  tecnologias
  2. jcemer.com   github.com/jcemer   twi5er.com/jcemer   speakerdeck.com/jcemer

  3. porto  alegre

  4. None
  5. None
  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
  7. $_ Linha  de  
 comando

  8. $_ Linha  de  
 comando x x Aplicações   na?vas

  9. $_ Linha  de  
 comando x x Aplicações   na?vas

    ENCONTRO LOCAWEB
 
 CONHEÇA OS PALESTRANTES Web x
  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  
  11. Tecnologias  para   criação  de  interfaces   de  linha  de

     comando
  12. #!/usr/bin/env bash set -e issue_number="$1" usage() { echo "git test

    <issue-number>" } 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
  13. Tecnologias  para   criação  de  interfaces   naCvas

  14. #include <gtk/gtk.h> 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
  15. None
  16. None
  17. Programadores  que  não  entendem   Cobol  são  arrastadores  de  objetos

    h"ps:/ /www.youtube.com/watch?v=EK49T77VQOQ
  18. None
  19. Tecnologias  atuais   para  criação  de   interfaces  
 naCvas

  20. None
  21. None
  22. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" <dependencies>

    <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/> </dependencies> <scenes> <!--Master--> <scene sceneID="pY4-Hu-kfo"> <objects> <navigationController title="Master" id="RMx-3f-FxP" sceneMemberID="viewController"> <navigationBar key="navigationBar" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" <autoresizingMask key="autoresizingMask"/> </navigationBar> <connections> <segue destination="7bK-jq-Zjz" kind="relationship" relationship="rootViewController" id="tsl-Nk-0bq"/> </connections> </navigationController> <placeholder placeholderIdentifier="IBFirstResponder" id="8fS-aE-onr" sceneMemberID="firstResponder"/> </objects> <point key="canvasLocation" x="-38" y="-630"/> </scene> <!--Detail--> <scene sceneID="yUG-lL-AsK"> <objects> <viewController title="Detail" id="JEX-9P-axG" customClass="DetailViewController" sceneMemberID="viewController <layoutGuides> <viewControllerLayoutGuide type="top" id="SYR-Wa-9uf"/> <viewControllerLayoutGuide type="bottom" id="GAO-Cl-Wes"/> </layoutGuides> <view key="view" contentMode="scaleToFill" id="svH-Pt-448"> <rect key="frame" x="0.0" y="0.0" width="600" height="600"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <subviews> <label clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" text="Detail view <rect key="frame" x="20" y="292" width="560" height="17"/> <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/> <fontDescription key="fontDescription" type="system" size="system"/> <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> <nil key="highlightedColor"/> </label> </subviews> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite" <constraints> <constraint firstItem="0XM-y9-sOw" firstAttribute="leading" secondItem="svH-Pt-448" secondAttribute <constraint firstItem="0XM-y9-sOw" firstAttribute="centerY" secondItem="svH-Pt-448" secondAttribute
  23. None
  24. None
  25. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="io.embarque.embarque.activities.AccurateFeedback"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">

    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/cover" android:layout_width="match_parent" android:layout_height="110dp" /> <View android:id="@+id/layer" android:layout_width="match_parent" android:layout_height="110dp" android:background="@drawable/backbar"/>
  26. Linguagens  de  programação   maduras  mas  com  uma  definição  

    de  interface  engessada   uClizando  XML
  27. Tecnologias  web   atuais  para  criação   de  interfaces

  28. HTML  &  CSS   (&  SVG)

  29. <html> <head> <title> ActiveReports Document </title><meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />

    </head><body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0"> <style> @page{size: 8.5in 11in;margin-top:0.2in;margin-left:0.8in;margin-right: 0.4in;margin-bottom:0.2in;} </style><div style="page-break-inside:avoid;"> <div style="position:relative;width:7.3in;height:10.6in;"> <span style="position:absolute;top:0.7638889in;left:0.06388891in;width: 1.954615in;height:0.2061111in;font-family:Times New Roman;font-size: 10pt;color:#000000;vertical-align:top;"><nobr>Nils Ericsonsgymnasiet</nobr></ span> <span style="position:absolute;top:0.9838889in;left:0.06388891in;width: 1.560914in;height:0.2461111in;font-family:Times New Roman;font-size: 14pt;color:#000000;vertical-align:top;"><nobr>FP1AMA1201</nobr></span> <span style="position:absolute;top:1.467736in;left:0.001999974in;width: 7.265717in;height:0.01in;overflow:hidden;background-color:Black;"></span> <span style="position:absolute;top:1.243889in;left:0.06388891in;width: 0.2861111in;height:0.2061111in;font-family:Times New Roman;font-size: 10pt;color:#000000;font-weight:bold;vertical-align:top;"><nobr>Nr</nobr></ span> <span style="position:absolute;top:1.467736in;left:0.001999974in;width: 7.265717in;height:0.01in;overflow:hidden;background-color:Black;"></span> <span style="position:absolute;top:1.243889in;left:0.4638888in;width:</body> </html>
  30. HTML Canvas Audio
 Video App  
 Cache Input
 types CSS

     2 Transforms AnimaCon Gradient Flexbox Filter SVG Especificações
  31. Responsive  
 Design Sistemas  de  
 escrita  de  CSS WAI-­‐ARIA

    Microformats Padrões
  32. HTML  &  CSS   (&  SVG) As  tecnologias  evoluíram  e

     são   uma  óCma  opção
  33. JavaScript

  34. function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.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; i<a.length; i++) if (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&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=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];} }
  35. Apesar  de  ser  uma  linguagem  muito   fácil  de  aprender

     e  escrever,  o   JavaScript  nasceu  com  uma  série  de   deficiências
  36. 1995

  37. 2008

  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
  39. JavaScript A  tecnologia  evoluiu  e   atualmente  é  uma  boa

     opção
  40. DHTML jQuery Backbone.js AngularJS Ember.js D3.js QUnit React JSBlocks Bibliotecas

     e   frameworks
  41. JavaScript A  comunidade  evoluiu  a   maneira  de  uClizar  a

     tecnologia
  42. jQuery
 plugins Twiier
 Bootstrap Zurb
 FoundaCon AngularJS
 DirecCves jQueryUI Componentes

      de  interface
  43. HTML  &  
 CSS  &   JS As  tecnologias  e

     comunidade   evoluíram,  as  tecnologias  são  uma   óCma  opção
  44. NaCvo  vs
 Web

  45. Acesso  a  recursos  de  
 entrada  e  saída   São

     estes  recursos  que  permitem   a  interface  humano  e  máquina
  46. HTML  5   JavaScript  APIs

  47. JavaScript  em  
 2011  +  APIs JavaScript  
 em  2008

  48. Captura  e  
 geração  de  áudio   Comandos  de  


    voz   Controle  por
 toque   Captura  de  
 imagem NaCvo   Web
  49. None
  50. Web  Audio  API  &
 getUserMedia() Permitem  capturar,  processar  e  

    sinteCzar  áudio
  51. Web  Audio  API  &
 getUserMedia() Permitem  capturar,  processar  e  

    sinteCzar  áudio navigator.getUserMedia({ audio: true }, onStream, onStreamError); h"p:/ /webaudioapi.com
  52. None
  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
  54. None
  55. getUserMedia() Permite  capturar  e  processar   imagens  e  vídeos

  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
  57. None
  58. Controle  por
 toque   Geolocalização   Controle  de  
 vibração

    NaCvo
 Mobile   Web
  59. Touch  Events Vetor  de  eventos  gerados  através   de  toques

     na  interface
  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);
  61. None
  62. GeolocaCon  API Acessa  a  localização  através   do  GPS,  IP

     e  wifi
  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
  64. VibraCon  API Permite  gerar  um  feedback  táCl

  65. VibraCon  API Permite  gerar  um  feedback  táCl navigator.vibrate([50, 100, 150]);

    h"p:/ /davidwalsh.name/vibraUon-­‐api
  66. EmiCr  
 noCficações   Condição  da  
 conexão   Condição

     da  
 bateria NaCvo
 Mobile   Web
  67. None
  68. NoCficaCon  API Permite  disparar  uma  noCficação   para  o  navegador

  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
  70. Online  /  Offline  
 Status  e  Events Permitem  checar  e

     monitorar  a   conexão  com  a  Internet
  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
  72. Baiery  Status  API Permitem  checar  e  monitorar  a   bateria

     do  disposi?vo
  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() {}); });
  74. Sensores  de
 movimento   Acesso  a
 Fullscreen   Capturar
 luminosidade

      ... h"p:/ /mobilehtml5.org
 h"p:/ /html5please.com NaCvo
 Mobile   Web
  75. A  maioria  dos  recursos  naCvos  estão   disponíveis  através  de

     APIs
  76. None
  77. PerspecCvas   futuras

  78. Web   Components

  79. Permite  isolar  código  HTML  o   mantendo  livre  de  interferências

      da  página Shadow  DOM
  80. <div twitter-user=“jcemer”></div> @jcemer

  81. <div gmaps-locale="Porto Alegre"> <div data-address-modal> Porto Alegre<br> Brasil - RS

    </div> </div> Porto Alegre
 Brasil - RS
  82. Permitem  definir  e  assisCr  ao   ciclo  de  vida  de

     elementos Custom  Elements
  83. <img src="jcemer.jpg" alt="Tableless Guy">

  84. <img src="diego.jpg" alt="Tableless Guy"> <script> document.querySelector('img').src = 'diego.jpg' </script>

  85. Elemento  criado   Adicionado  ou  
 removido  do
 DOM  

    Alteração  nos  
 atributos Custom  
 Elements
  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 *
  87. h"ps:/ /speakerdeck.com/jcemer/ componentes-­‐para-­‐a-­‐web

  88. Data  binding

  89. Conexão  entre  a  lógica  de   negócio  da  aplicação  e

     sua   interface  de  usuário Data  binding
  90. ESTADOS CIDADES

  91. ESTADOS CIDADES JS SERVER

  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
  93. h"p:/ /leobalter.github.io/
 data-­‐binding-­‐slides/output/#1

  94. Service
 Workers

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

      pelo  navegador Service  workers
  96. Os  Service  Workers  poderão   interceptar  chamadas  a  rede  e

      manter  um  cache  permanente  de   requisições Experiência  
 Offline  rica
  97. ENCONTRO LOCAWEB
 
 CONHEÇA OS PALESTRANTES x ENCONTRO LOCAWEB
 


    PALESTRANTES x ENCONTRO LOCAWEB
 
 INSCREVA-SE PREENCHENDO SEUS DADOS ABAIXO x SERVICE WORKER CACHE
  98. ENCONTRO LOCAWEB
 
 CONHEÇA OS PALESTRANTES x ENCONTRO LOCAWEB
 


    PALESTRANTES x ENCONTRO LOCAWEB
 
 INSCREVA-SE PREENCHENDO SEUS DADOS ABAIXO x SERVICE WORKER CACHE
  99. Service
 Workers Background
 Sync Push  
 NoCficaCons Geofencing  e  


    Alarmes Especificações de  API
  100. h"p:/ /www.slideshare.net/ caelumdev/serviceworkers-­‐sergio

  101. None
  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  applica<ons  are  cheap  to   develop,  and  easy  for  even  the  smallest   startup  to  deliver.   Paul  Graham Setembro  de  2001 h"p:/ /www.paulgraham.com/road.html
  103. Obrigado Always  bet  on  web! @jcemer even.tc/rsjs-­‐2015/?code=17elw