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

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